ShaLiWa 2019-12-01
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
每个 mutation 都有一个字符串的事件类型(type)和一个回调函数(handler), 这个回调函数就是实际进行状态更改的地方, 接收 state 作为第一个参数.
通过 store.commit 提交 mutation 事件类型, 触发对应的回调函数.
** mutation 需遵守 Vue 的响应规则**
// 使用 Vue.set Vue.set(obj, "newProp", 123); // 以新对象替换老对象 state.obj = { ...state.obj, newProp: 123 };
const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { state.count++; // 更改状态 }, getCount (state, payload) { state.count += payload; } } });
通过 store.commit 来提交 mutation 改变状态
// 普通提交方式 this.$store.commit("increment"); // 提交 mutation 并传参, 只能传一个参数(类型不限) this.$store.commit("getCount", 10); // 以对象的形式提交 this.$store.commit({ type: "getCount", num: 10 });
// mutation-type.js export const SOME_MUTATION = "some_mutation"; // store.js import Vuex from 'vuex'; import { SOME_MUTATION } from './mutation-type'; const store = new Vuex.Store({ state: {}, mutations: { // 使用ES2015 风格的计算属性命名功能来使用一个常量作为函数名 [SOME_MUTATION] (state) {} } });
import { mapMutations } from 'vuex'; export default { methods: { // 以数组的形式 ...mapMutations([ // 将 this.increment() 映射为 this.$store.commit('increment') 'increment', // 将 this.incrementBy(num) 映射为 this.$store.commit('incrementBy', num) 'incrementBy' ]), ...mapMutations({ // 将 this.add() 映射为 this.$store.commit('increment') add: 'increment' }) } }