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.jsexport const SOME_MUTATION='SOME_MUTATION'//store.jsimport 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'    ])}