4、mutations

介绍

本文是学习vuex时做的笔记，所有笔记内容请看 vuex学习笔记

mutations

更改Vuex的store中的状态的唯一方法是提交mutation。Vuex中的mutation非常类似于事件；每个mutation都有一个字符串的事件类型(type) 和一个回调函数（handler)。这个回调函数就是我们实际进行更改的状态，并且它会接受state 作为第一个参数。

const store = new Vuex.Store({
    state:{
        count:1
    },
    mutations:{
        increment(state){
            // 变更状态
            state.count++;
        }
    }
})

不能直接调用一个 mutation handler。该选项更像是事件注册：“当触发一个类型为increment” 的mutation时，调用此函数。要唤醒一个mutation handler，需要以相应的type调用stroe.commit 方法：

store.commit('increment')
increment 为事件类型type,{state.count++}为回调函数体

提交载荷(Payload)
可以向sotre.commit 传入额外的参数，即mutation 的载荷(payload)

//...
mutations:{
    increment(state,n){
        state.count += n
    }
}

如下方式调用
store.commit('increment',10)

在大多数情况下，载荷应该是一个对象，这样可以包含多个字段，并且记录的mutation 会更易读：

//。。
mutations:{
    increment(state,payload){
        state.count +=payload.amount
    }
}
//..
调用方式如下
store.commit('increment',{
    amount: 10
})

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

store.commit({
    type:'increment',
    amount: 10
})

当使用对象风格的提交方式，整个对象都作为载荷传给 mutation 函数，因此handler保持不变：

mutations:{
    increment(state,paylaod){
        state.count += payload.amount
    }
}

Mutation 需遵守Vue的相应规则
既然Vuex的store中 的状态是响应式的，当更新状态时，监控状态的Vue组件也会更新。意味着Vuex中的mutation 也需要于使用Vue一样遵守一些注意事项：
1、最好提前在store中初始化好所需属性
2、当需要在对象上添加新属性时，有两种方法:
- 使用Vue.set(obj，‘newProp’,123)
-以新对象替换老对象，如下所示，使用对象展开运算符

state.obj = { ...state.obj，newProp:122}

使用常量替换Mutation 事件类型
使用常量替换mutation事件类型，如下所示：

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex form 'vuex'
import { SOME_MUTATION } from './mutation-types'

const store =new Vuex.Store({
    state:{...},
    mutations:{
        // 使用ES2015风格的计算属性命名从能使用一个常量作为函数名
        [SOME_MUTATION](state){
            //
        }
    }
})

Mutation 必须是同步函数
一条重要的原则就是要记住 mutation 必须是同步函数
示例如下：

mutations: {
  someMutation (state) {
    api.callAsyncMethod(() => {
      state.count++
    })
  }
}

现在想象，我们正在 debug 一个 app 并且观察 devtool 中的 mutation 日志。每一条 mutation 被记录，devtools 都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中 mutation 中的异步函数中的回调让这不可能完成：因为当 mutation 触发的时候，回调函数还没有被调用，devtools 不知道什么时候回调函数实际上被调用——实质上任何在回调函数中进行的状态的改变都是不可追踪的。

在组件中提交Mutation

可以在组件中使用this.$store.commit(‘xxx’) 提交mutation，或者使用mapMutations辅助函数将组件中的methods映射为 store.commit 调用（需要在根节点注入store）

import {mapMutations } from 'vuex'
export default{
    methods:{
        ...mapMutations([
        // 将this.increment映射为this.$store.commit('increment')
           'increment',
       // 'mapMutations' 也支持载荷
       // 将this.incrementBy(amount) 映射为this.$store.commit('incrementBy',amount)
           'incrementBy''
           
        ]),
        // 将this.add() 映射为'this.$store.commit('increment')'
        ...mapMutations({
           add:'increment'
        })
    }
}