Vuex的mutations和vuex-devtools

vuex-devtools

这是一个浏览器关于vuex的一个插件，安装和使用这里就先不说了，有兴趣的可以上网找找安装的教程。

一、mutations是用来干嘛的？

mutations相当于可以在里面定义方法，通过里面的方法来达到修改state里的状态值。

注：Mutation中的方法必须是同步方法

即Vuex的store状态的更新的唯一方式：提交mutations

mutations主要包括两部分：

字符串的事件类型（type）一个回调函数（handler），该回调函数的第一个参数就是state。（不管你起的什么名字）

注意：

我们通过提交mutations的方式，而非直接改变store.state.count这是因为Vuex可以更明确的追踪状态的变化，所以不要直接修改store.state.count的值。

二、使用mutations

在store文件夹下的index.js

import Vue from 'vue' import Vuex from 'vuex' //1、安装插件 Vue.use(Vuex) //2、创建对象,里面会放一下固定的对象 const store = new Vuex.Store({ state:{ counter:0 },//这是挂载属性的 mutations:{ //在里面定义方法 zenjia(state){ state.counter++ }, jianshao(state){ state.counter-- } }, actions:{ }, getters:{ }, modules:{ } }) //3、导出store对象 export default store

在需要使用的组件中使用，假设这个组件为hhh.vue

<template> <div id="app"> <p>{{counter}}</p> <button @click="zenjia">+1</button> <button @click="jianshao">-1</button> </div> </template> <script> export default:{ name:'App', data(){ return{ message:"我是APP组件" } }, methods:{//在这里去导入使用的mutations方法 addition(){ this.$store.commit('zenjia') //commit别忘记了 }, subtration(){ this.$store.commit('jianshao') } } } </script>

三、使用步骤小结

提取出一个公共的store对象，用于保存在多个组件中共享的状态将store对象放置在new Vue（全局）对象中，这样可以保证在所有的组件中都可以使用到在其他组件中使用store对象中保存的状态即可 通过this.$store.state.X属性的方法来访问状态通过this.$store.commit(‘mutations中的方法’)来修改状态。

四、mutations里携带参数

在通过mutation更新数据的时候，有可能我们希望携带一些额外的参数--------mutation的载荷（payload）

如果参数不是一个：

我们通常要以 对象的形式传递，也就是payload是一个对象，这时候也可以再从对象中取出相关的信息。

传入一个参数或对象

mutations:{ incrementcount(state,count){ state.counter+=count } //传入一个对象 addStudent(state,stu){ state.student.push(stu) } }

在需要使用的vue组件的method中去调用

<button @click="addCount(5)"> +5 </button> <button @click="addstudent">添加学生</button> //在method中 methods:{ addCount(count){ this.$store.commit('incrementCount',count) } //添加学生 addstudent(){ const stu={id:114,name:'mary',age:34} this.$store.commit('addStudent',stu) //这里的stu和count被称为payload负载 } }

五、mutation提交风格

上面通过commit进行提交是一种普通的方式

vue还提供了另外一种包含type属性对象的风格

addStudent(){ this.$store.commit({ type:'changecount', count:200 }) }

所以上面代码中mutation的处理方式是将整个commit的对象作为payload使用。这时在store中是这样的

changeCount(state,payload){ state.count = payload.count }

六、mutation的响应规则

我们知道vux的store中的state是响应式的，当state中的数据发生改变时，vue组件会自动更新。

所以我们要遵守一些vuex对应的规则：

提前在store中初始化好所需的属性当给state中的对象添加新属性时，使用下面的方式： 方式一：使用Vue.set(obj,‘新属性’，值)方式二：用新对象给旧对象重新赋值 当要删除state中对象的某个属性时，可以使用Vue.delete(state.X,‘要删除的对象属性’)

在store里面：

const store = new Vuex.Store({ state:{ counter:0, info:{ name:'aaa', age:20, id:12345 } }, mutations:{ //要想更新name,可以这样写 state.info.name = 'bbb' //要想增加新的属性 state.info['height']=1.90 //这样是做不到响应式的 //要想响应式的增加，要这样写 Vue.set(state.info,'height','1.90') //删除的响应式： Vue.delete(state.info,'age') }, actions:{ }, getters:{ }, modules:{ } })

七、Vuex–mutations的类型常量

即给mutations里面的方法另起一个别名（这个别名要重新建立一个文件），在使用的时候就使用这个别名即可。这样做的目的是为了减少出错的可能性，也便于维护。

具体的相关内容可以查看官方文档。