在说mutation之前，我们回到Vuex_状态管理01中提的那个初始需求：在某一个组建中引入了两个子组建，分别是a.vue和b.vue，a.vue和b.vue是兄弟组建，它们存在数据交互，我们在store中声明了一些数据，在a.vue中通过this.$store.state访问，在b.vue中用this.$store.state修改。这样a.vue能及时响应b.vue中对于这个数据的修改。
来看b.vue的代码：
b.vue
也就是说，可以通过this.$store.state这种方式修改状态（数据值）。
现在来看vuex对于mutation的介绍：
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
这个意思是想要修改state中的数据值，必须用vuex提供的mutation。
与上面的效果冲突。原因是这样的，vue建议我们vuex在开发环境下最好启用严格模式（发布环境要关闭严格模式），vuex又规定，如果vuex启用了严格模式，那么所有对state中的状态值的改变必须由mutation完成，否则就会报错（底层代码的机制被破坏）。
现在开启vuex的严格模式：
store严格模式
然后在组建中使用this.$store.state.arr.push(); 更改state中的值，就会报错：
开启严格模式之后
就报了这样的错：
Do not mutate vuex store state outside mutation handlers.（不要在mutation之外改变vuex的state的状态）
所以我们要用mutation改变store中的数据。
store.js
要在组建中使用commit调用mutation中的数据：
在组建中调用store中的数据
也可以向mutation中声明的函数传参:
所以上面的两断代码可以作出这样的改变：
mutation
组建中调用：
组建中的调用
对于mutations中的函数传参，vuex还有一个建议： 这个参数尽量是一个对象，这样便于传输大量数据。
mapMutation:
当组建中要调用store中的若干个对state进行数据修改的函数，为了不产生代码冗余，vuex提供了mapMutation。
store中的mutation:
mutation
组建中使用mapMutation调用：
组建
如果mutation中的函数在声明的时候就不需要参数，那么向上面这种方法就可以直接调用函数，但是这种可能行比较小，因为大部分情况，mutation中的函数是需要参数的。
这个时候就不能用上面这种代码，如果传参，要将组建中的代码改成这样：
组建
这样可以在使用mapMutation的同时传参。
你所羡慕的一切，都是有备而来。
网友评论