Vuex之Mutation

修改Vuex的store里得到状态的唯一方法为提交mutation，mutation类似于事件，每个mutation会有一个字符串里的事件类型(type)和一个回调函数（handler）。这个回调函数就是我们进行状态更改的地方，并且接受state为第一个参数

const store=new Vuex.Store({
 state:{
  count:1
 }，
 mutations:{ //事件类型为mutation
  increment(state){ //回调函数修改状态
   state.count++   
  }
 }
})

不能直接调用一个mutation handler，必须使用store.commit('increment')
store.commit()函数接受第二个参数，这个参数叫做mutation的载荷（Payload），载荷通常是一个对象，这样可以包含多个字段 并且记录的mutation更易读：

//store.js文件里
mutations:{
 increment(state,payload){
  state.count+=payload.amount
 }
}

//在其他js文件里引用store.js
store.commit('increment',{
 amount:10
})

提交mutation的另一种方式是对象风格,此时整个对象作为载荷传给mutation,因此handler保持不变。

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

Muktation 需遵守的Vue的相应规则

1.最好提前在你的store中初始化所有所需的属性
2.当需要在对象上添加新属性时，
使用Vue.set(obj,'newProp',123)
或者以新对象替换老对象,比如使用stage-3的对象展开运算符
state.obj={ ...stateobj,newProp:123 }

使用常量替代Mutation事件类型

这样做的好处是使linter之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的文件合作者对整个app包含的mutation一目了然。

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

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

const store=new Vuex.Store({
 state：{...},
 mutations:{
  [SOME_MUTATION](state){

  }
 }

})

Mutation函数必须使同步函数。如果是异步函数的话，devtool捕捉不到前一状态和后一状态的快照。

在组件中提交mutation

一个方法是 this.$store.commit('XXX')(需要在根组件里传入store选项，可以参考这里);
第二个方法是使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

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