本文详细介绍了如何在 Vue.js 中使用 Vuex 的 Mutation 功能来修改全局状态。强调了只能通过提交 Mutation 来改变状态，并展示了如何传递参数、使用对象参数以及在组件中映射 Mutation。同时提到了在对象属性增加时，需要使用 Vue.set() 以保持响应式，并预告了接下来的 Action 和 Module 相关内容。
接上两篇, 这篇介绍Mutation的使用.
master分支为最终版本.
每个阶段的讲解都会创建一个分支.
init分支为初始化后配置完成路由的版本.
上两篇文章已经讲述了, 全局状态的声明, 组件内获取, 过滤等操作.
但还少一个经常使用的操作, 就是对状态值的修改. 我们不可能声明的变量, 只是为了查看而不去操作这个变量. 修改全局的状态才是状态管理的关键, 因为只有状态改变了, 才需要我们去管理. 这就是本篇文章要学习的mutation(变化; 转变;).
Vuex - Mutation
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.这是官方文档的原文. 不要通过其他方式去修改store中的状态, 这点非常关键, 那样做会使状态不收我们管控的.在stroe中定义一个mutation, 作用是将count++.
mutations:{
addCount(state){
state.count++;
}
},
mutation的第一个参数是state, 通过他我们能拿到state中定义的状态.在组件内调用定义的mutation(路由1). 通过this.$store.commit("addCount")触发store中的addCount, 从而改变count的值. 这样在其他页面引用的count都会跟着改变.
methods:{
filterAgeGt18(arr){
return arr.filter((ele, ind) => {
return ele.age > 18;
});
},
addCountInR1(){
this.$store.commit("addCount");
}
}给mutation传参, 在改变store中的状态时, 可能需要传递进参数. 再定义一个mutation:addCountWithParams, 实现将count的值与传递的参数相加.
mutations:{
addCount(state){
state.count++;
},
addCountWithParams(state, params){
state.count += params;
},
pushDataToArrat(state){
state.array.push({
name:"sunq",
age:100
})
}
},组件内传递参数调用(路由2.1).
methods:{
addLocalCount(){
this.localCount++;
},
addCount(){
this.$store.commit("addCountWithParams", Math.ceil(Math.random() * 20));
}
},
传入一个随机的1-20的整数, 与count相加.官方推荐传递一个对象参数, 实践中也确实这样, 避免了对参数个数的控制, 而且这样更能和mutation的对象方式的提交组合使用, 写法更简洁.
再定义一个mutation, 传递一个对象参数.
mutations:{
addCount(state){
state.count++;
},
addCountWithParams(state, params){
state.count += params;
},
addCountWithObjParams(state, params){
state.count += params.num;
}
},
在组件中使用对象的方式调用addCountWithObjParams(路由3).
methods:{
addCount(){
//普通方式提交 this.$store.commit("addCountWithObjParams", {
num: Math.ceil(Math.random() * 10)
});
//对象方式提交 this.$store.commit({
type: "addCountWithObjParams",
num: Math.ceil(Math.random() * 10)
});
}
},
上面代码提交了两次, 分别使用普通方式提交和对象风格提交addCountWithObjParams.Mutation 需遵守 Vue 的响应规则, 所以需要注意两点,mutation改变的变量需先在state中声明好,
对于对象属性的增加, 不能使用普通方式, 如 o1.k1 = 12; 这样的增加属性虽然可以实现效果, 但是vue的响应式是检测不到的, 那么关于此对象的双向数据就不会触发.
举个栗子.
state中增加一个对象aObject.
state:{
count:13,
anotherCount:17,
aObject:{
a:147
}
},
组件内获得对象, 并使用v-for将所有键值对渲染(路由3).
使用mapState获得:
computed:mapState(["anotherCount","count", "aObject"])
页面渲染:
- store中的对象aObject的{{k}}的值 : {{v}}
增加一个mutation, 给对象新增一个属性.
mutations:{
addCount(state){
state.count++;
},
addCountWithParams(state, params){
state.count += params;
},
addCountWithObjParams(state, params){
state.count += params.num;
},
changeAvalue(state){
state.aObject.b = 149;
console.log(state.aObject);
}
},
组件内commit这个mutation(路由3).
changeA(){
this.$store.commit({
type: "changeAvalue"
});
}
效果是控制台打印的对象已经有b这个属性了, 但是页面的渲染却没有变化.
正确的姿势应该是用Vue提供的set方法.修改changAvalue这个mutation. Vue.set()
changeAvalue(state){
// state.aObject.b = 149;Vue.set(state.aObject, "b", 149);
console.log(state.aObject);
},
再次执行提交mutation的操作页面的列表渲染会跟着更新.辅助函数的使用. mapMutations (路由4).
和state, getter一样, mutatin也有一个辅助函数. 回顾一下上面的逻辑, 我们在点击事件的事件处理函数中提交mutation, 那为什么不直接将mutation作为点击事件的事件处理函数呢, 这样不就少了一层函数的嵌套. mapMutations就可以实现这点.
mapMutations可以将mutation映射到组件内的methods中, 同mapGetters一样, 可以传递数组, 将mutation映射到组件内的同名method上, 也可以传递对象, 给mutation起一个组件内的别名.
methods:{
...mapMutations([
'addCount',
]),
...mapMutations({
add: 'addCount'
})
},
这样可将addCount和add直接赋给按钮的点击事件, 即可实现将count加1的操作.
mutation的辅助函数的使用
增加Count
还是增加Count
count的值 : {{count}}
mutation所做的操作都是同步的, mutation不能进行异步的操作state中的变量,
异步操作state中的变量是下一篇Action所做的.
mutation的使用就到这里, 这一阶段的代码在mutation分支上, 可下载验证上述功能:
未完.... 还有 Action Module.
1019
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
