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'
])
}