vuex学习五----Mutations

1：mutation

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

const store=new Vuex.Store({
    state:{
        count:1
    },
    mutations:{
        increment(state){
            state.count++
        }
    }
})

不能直接调用一个mutatin handler(处理程序)，这个选项更像是事件注册：‘当触发一个类型为increment的mutation时，调用该函数’，要唤醒一个mutation handler，你需要以相应的type调用store.commit方法：

store.commit('increment')

2：载荷

可以向store.commit传入额外的参数，mutation的载荷：

mutations:{
    increment(state,n){
        state.count+=n;
    }
}
store.commit('increment',10)

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

mutation:{
    insrement(state,payload){
        state.count+=payload.amount
    }
}
store.commit('increment',{
    amount:10
})

3：对象风格提交的提交方式

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

当时用对象风格的提交方式，整个对象都作为载荷传给mutation函数，因此handler保持不变(☚待研究☛)；

mutation:{
    increment(state,payload){
        state.count+=payload.amount;
    }
}

4：使用常量替代Mutation事件类型

这是很常见的模式。使得linter之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码一目了然；在需要多人协作的大兴项目中，这个会很有帮助；

//mutation-types.js
export const SOME_MUTATION='SOME_MUTATION'
//store.js
import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'
const store=new Vuex.Store({
    state:{...},
    mutations:{
    //我们可以使用ES2015风格的计算属性命名功能来使用一个常量作为函数名
        [SOME_MUTATION](state){
            //mutate state
        }
    }
})

5：mutation必须是同步函数(☚待研究☛)

store.commit('increment')
//任何由‘increment’导致的状态变更都应该在此刻完成

6：在组建中提交Mutations

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

import { mapMutations } from 'vuex'
export default{
    ...mapMutations([
    //映射this.increment()为this.$store.commit('increment')
        'increment'
    ]),
    ...mapMutations([
        add:'increment'
    ])
}