Vuex 学习4 - 核心概念Mutation

Mutation

教程来自 Vuex 官网：https://vuex.vuejs.org/zh/guide/mutations.html

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于时间：每个 mutation 都有一个字符串的 事件类型和一个回调函数。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const state = {
   
    count: 1,
    todos: [
        {
    id: 1, text: '第一个数组值', done: true },
        {
    id: 2, text: '第二个数组值', done: false },
    ]
};

const mutations = {
   
    add(state) {
   
        state.count ++;
    },
    reduce(state) {
   
        state.count --;
    }
}

你不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 add 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commint 方法：

// 在单页面组件中
$store.commit('...');
// 导入 store 之后
store.commit('...')

提交载荷（Payload）

你可以向 store.commit 传入额外的参数，即 mutation 的载荷：

mutations: {
   
    add (state, n) {
   
        state.count += n;
    }
}

// 单页面组件中
$store.commit('add', 5)
// 导入 store
store.commit('add', 5)

对象风格的提交方式

提交 mutation 的另一种方式是直接使用包含 type 属性的对象：

store.commit({
   
    type: 'add',
    amount