vuex新手进阶篇之改变state mutations的使用

目录
  • 1. 设置改变state的mutations事件
  • 2.提交mutations事件(常用的两种方法)
  • 总结

紧接上篇文章,本篇文章讲vuex ,如何去改变state ,mutations的使用,我依然使用了vuex的modules

1. 设置改变state的mutations事件

index.js

dict.js

2.提交mutations事件(常用的两种方法)

<template>
  <div>
    <div>
      改变vuex index.js 下的state
      <div>
        {{ $store.state.userInfo.name + "---" + $store.state.userInfo.age }}
      </div>
      <div>
        <button @click="changeUserInfo">修改方式1</button>
      </div>
      <div>
        <button @click="changeUserInfo2">修改方式2</button>
      </div>
    </div>
    --------------------------------------------------

    <div>
      改变vuex index.js modules下的dict 下的state
      <div>
        {{ $store.state.dict.taskTypeDict }}
      </div>
      <div>
        <button @click="changeDict">修改方式1</button>
      </div>
      <div>
        <button @click="changeDict2">修改方式2</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex"; //修改vuex state第二种方式,首先引入
export default {
  data() {
    return {};
  },
  methods: {
    // 修改方式1,提交mutations
    changeUserInfo() {
      let userInfo = { name: "uzi", age: 24 };
      //setUserInfo方法为你在vuex index.js 下的mutations下的注册的方法名称
      this.$store.commit("setUserInfo", userInfo);
    },
    // 修改方式2
    ...mapMutations(["setUserInfo"]), //把vuex index.js 下的mutations下的注册的方法名称写入
    changeUserInfo2() {
      let userInfo = { name: "kobe", age: 30 };
      this.setUserInfo(userInfo);
    },
    // ------------------------------------------------------------------
    changeDict() {
      let dict = "进行中";
      //   因为我们在modules下开启了命名空间,所以我们在调用dict下的Mutations时,需在前方加上空间名字
      this.$store.commit("dict/setTaskTypeDict", dict);
    },
    ...mapMutations({ setDict: "dict/setTaskTypeDict" }), //因为我们开辟了命名空间,故需要重写一个方法名,进行承接映射,注意此处不再是数组,而是一个对象
    changeDict2() {
      let dict = "已完成";
      this.setDict(dict);
    },
  },
};
</script>

注释本人认为已写清

总结

到此这篇关于vuex新手进阶篇之改变state mutations使用的文章就介绍到这了,更多相关vuex改变state mutations的使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vuex新手进阶篇之改变state mutations的使用

    目录 1. 设置改变state的mutations事件 2.提交mutations事件(常用的两种方法) 总结 紧接上篇文章,本篇文章讲vuex ,如何去改变state ,mutations的使用,我依然使用了vuex的modules 1. 设置改变state的mutations事件 index.js dict.js 2.提交mutations事件(常用的两种方法) <template> <div> <div> 改变vuex index.js 下的state <d

  • vuex学习进阶篇之getters的使用教程

    目录 1.设置gettes 事件 2.使用调用 3.最终页面示例 getters的优点: 总结 紧接上篇,本片主要讲讲vuex 中 getters的使用,示例中使用了vuex的modules,getters的使用与vue组件中computed中使用类似,再学习的过程中,注意举一反三 1.设置gettes 事件 index.js dict.js 我们在index.js中设置了两个getters事件,在子模块dict.js中设置了两个getters事件 2.使用调用 <template> <

  • Vuex新手的理解与使用详解

    1 vuex的概念理解 提到vuex,就不能不先提vue. 我个人开始尝试学习使用vue,是因为此前总是遇到页面逻辑数据与视图的一致性问题.在使用vue之前,我们使用jQuery插件的时候,一桩麻烦事就是既要在每个数据变更后,写代码去改变视图,又要考虑html上各种输入改变时监听各种事件以改变页面逻辑数据.当然最早的时候,我们使用html内部的value来记载各种数据,但这种方式在今日看来就有些简单粗暴了,难以使用复杂的页面逻辑.这也正是我开始使用vue的初衷--数据双向绑定. 但对于vue而言

  • 在Vuex使用dispatch和commit来调用mutations的区别详解

    main.js中 import Vuex from 'vuex' Vue.use(vuex); const store = new Vuex.store({ state: { nickName: "", cartCount: 0 }, mutations: { updateUserInfo(state,nickName) { state.nickName = nickName; }, updateCartCount(state,cartCount) { state.cartCount

  • vuex实现像调用模板方法一样调用Mutations方法

    我们在写vue项目中如果,我们发现vuex中<button @click="$store.commit('jia')">-</button>是十分麻烦的,我们想直接写成@click中的jia,我们应该如何处理? 我们可以想一想我们在解决state时是如何解决的,为此我们将介绍一个与解决state相同方案 第一步在我们自己创建模板a.vue里引入我们的mapMutations 代码如下: import {mapState,mapMutations} from 'v

  • vuex如何在非组件中调用mutations方法

    目录 在非组件中调用mutations方法 在组件中调用 在非组件中调用 vuex的mutations属性 mutations属性介绍 对象风格的提交方式 使用常量替代 Mutation 事件类型 Mutation 必须是同步函数 在组件中提交 Mutation 在非组件中调用mutations方法 一般情况下调用 mutations.js 中的方法都是在组件中,如果想在非组件中调用,则需要使用如下方式 在组件中调用 import {mapMutations} from 'vuex' impor

  • jqGrid 学习笔记整理——进阶篇(一 )

    在浏览导航栏添加所需按钮 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>DEMO</title> <link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css" /> <link rel=&

  • Java中jqGrid 学习笔记整理——进阶篇(二)

    相关阅读: Java中jqGrid 学习笔记整理--进阶篇(一) 本篇开始正式与后台(java语言)进行数据交互,使用的平台为 JDK:java 1.8.0_71 myEclisp 2015 Stable 2.0 Apache Tomcat-8.0.30 Mysql 5.7 Navicat for mysql 11.2.5(mysql数据库管理工具) 一.数据库部分 1.创建数据库 使用Navicat for mysql创建数据库(使用其他工具或直接使用命令行暂不介绍) 2. 2.创建表 双击打

  • vuex分模块后,实现获取state的值

    问题:vuex分模块后,一个模块如何拿到其他模块的state值,调其他模块的方法? 思路: 1.通过命名空间取值--this.$store.state.car.list // OK 2.通过定义该属性的getter方法,因方法全局注册,不存在命名空间,可以通过this直接调用. this.$store.state.car.carGetter 我在car模块中自己的定义了state, getters, this.$store.state.car.list可以拿到值. 但是,this.$store.

  • javascript进阶篇深拷贝实现的四种方式

    目录 概念介绍 第一种:递归方式(推荐,项目中最安全最常用) 第二种:JSON.stringify() :(这个不推荐使用,有坑) 第三种:使用第三方库lodash中的cloneDeep()方法 第四种:JQuery的extend()方法进行深拷贝(推荐在JQ中使用) 总结 概念介绍 深拷贝:在堆内存中重新开辟一个存储空间,完全克隆一个一模一样的对象 浅拷贝:不在堆内存中重新开辟空间,只复制栈内存中的引用地址.本质上两个对象(数组)依然指向同一块存储空间 第一种:递归方式(推荐,项目中最安全最常

随机推荐