Vuex_状态管理03（Mutation和mapMutation

在说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的同时传参。

---

你所羡慕的一切，都是有备而来。