更改 Vuex 的 store 中的状态的唯一方法是提交 mutation.Vuex 中的 mutation 非常类似于事件:
每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 变更状态 state.count++ } } })
//type:increment
//提交motations:
store.commit('increment')
//向store.commit
传入额外的参数,即 mutation 的 载荷(payload):
store.commit('increment', { amount: 10 })
//对象风格的提交方式
store.commit({ type: 'increment', amount: 10 })
Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项
1,提前在你的 store 中初始化好所有所需属性 2,在对象上添加新属性 Vue.set(obj, 'newProp', 123) //新对象替换方式 state.obj = { ...state.obj, newProp: 123 }
//mutation必须是同步函数
//任何在回调函数中进行的状态的改变都是不可追踪的。
使用常量作为mutation的事件类型
//常量放在单独的文件中 // 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 } } })
在组件中提交mutation
//可以用this.$store.commit("***"); //可以用mapMutations将组件中的 methods 映射为 store.commit 调用 import { mapMutations } from 'vuex' export default { // ...
methods: { ...mapMutations([ 'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')` // `mapMutations` 也支持载荷: 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)` ]), ...mapMutations({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')` }) } }