Vue方向：Vuex状态管理：Mutation的使用

1、定义

        更改Vuex的store中的状态的唯一方法是提交mutation，此处的唯一不是指只有这一种途径，而是建议使用的唯一途径，mutations非常类似于事件，都带有一个字符串的事件类型type和一个回调函数handler，在这个的回调函数中，就是去修改状态的地方，store对象提供了一个commit方法用来触发mutation中的事件，这个commit类似于传值的$emit。

2、使用mutation

     首先我们要先定义下mutations，然后修改状态数据的方法写在这中间。

代码

代码

下面看下运行的结果：

运行结果

下面我们来看看mutations参数的说明：

    mutation函数只接受两个参数，mutation函数可以接受两个参数，第一个参数就是state状态，第二个参数是在通过commit触发mutation函数时传递的载荷（payLoad）

    commit 只接受两个参数，第一个参数是mutation中的方法名，第二个参数是载荷payload

     commit方法可以直接传递载荷，载荷中有一个固定的属性type用来标识触发哪一个mutation，除了type属性，其他属性都是载荷数据。

图示

3、mutations函数的第一个参数

      mutation函数中接受的第一个参数就是state状态对象，可以直接通过state修改状态。

代码

4、mutations的第二个参数

        官网称第二个参数的说法叫做载荷（payload），也就是说在组件中使用commit触发函数时，还可以传入额外的参数。

index.js

Vuex.vue

运行结果

    大多数情况下，载荷payload也就是第二个参数应该是一个对象，原因在于对象可以传递多个数据，如果传递普通类型的值只能传递一个。

代码

5、关于Mutations

        提交的另外一种风格是直接使用包含type属性的对象

代码

        此时mutation函数不用做任何改变

代码

        会自动触发payload中的type属性对应的mutations函数，commit参数对象整体就是payload。

6、Mutation需要遵循Vue的响应规则

      既然Vuex的store中的状态是响应式的，那么当改变状态时，监视状态的Vue组件也会自动更新，因此Vuex中的mutation也需要Vue的响应规则。

7、触发响应的注意事项

      最好提前在store中初始化所有所需的属性，使用 Vue.set( obj, "newProp", 123)方法新增对象的属性，使用新对象替换老对象的方式触发响应。

示例（运用扩展运算符来创建新对象替换老对象）

代码

8、Mutation必须是一个同步函数

      同步函数的说明：

       1、mutation必须是同步函数

       2、如果mutation是一个异步函数，异步修改状态，将不便于调试

       3、旧版本的devtools都需要捕捉到前一状态和后一状态的快照，没办法捕捉到快照信息

       4、异步执行会有专门的action去处理

mutation同步的情况下：

代码

执行结果

注意：devtools目前是可以异步捕获快照了