修改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
})
1.最好提前在你的store中初始化所有所需的属性
2.当需要在对象上添加新属性时,
使用Vue.set(obj,'newProp',123)
或者以新对象替换老对象,比如使用stage-3的对象展开运算符
state.obj={ ...stateobj,newProp:123 }
这样做的好处是使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捕捉不到前一状态和后一状态的快照。
一个方法是 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')
})
}
}