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里面的方法另起一个别名（这个别名要重新建立一个文件），在使用的时候就使用这个别名即可。这样做的目的是为了减少出错的可能性，也便于维护。
具体的相关内容可以查看官方文档。