[30天 Vue学好学满 DAY20] Vuex-3

Mutation

提交mutation，是更动state的唯一方法，并以state为第一个参数。
包含事件类型(type)、回调函数(handler)，不可直接调用，需透过提交(commit)。

注册Mutation於store.js

// type: addTodo
mutations: {
    // 业务逻辑
    addTodo (state) {
        // 新增待办
        state.todoList.push({ id: 3, text: '待办事项C', done: true });
    }
}

於元件中调用

store.commit('addTodo')

Payload(载荷)

提交时可带入参数。

调整mutations.addTodo

mutations: {
    // 业务逻辑
    addTodo (state, todo) {
        // 新增待办
        state.todoList.push(todo);
    }
}

调整元件
HTML

// 透过输入框新增待办
<input @keyup.enter="add" v-model="todo.text">
<h1>已完成 {{ totalDone }} 项</h1>
<li v-for="item in todoList" :key="item.id">
    {{ item.text }}
</li>

Data

data() {
    return {
      todo: {
        text: "",
        done: false
      }
    };
}

定义方法

methods: {
    add function(){
      this.todo['_id'] = this.totalDone +1 ;
      store.commit('addTodo', this.todo);
    } 
}

起前端测试

mapMutations

methods: {
    add: function () {
      this.todo["_id"] = this.totalDone + 1;
      this.addTodo(this.todo);
    },
    ...mapMutations([
      "addTodo", // store.commit('addTodo, this.todo);
    ]),
},

提醒 Mutation: 处理同步性动作

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://medium.com/itsems-frontend/vue-vuex1-state-mutations-364163b3acac
https://ithelp.ithome.com.tw/articles/10185686
https://ithelp.ithome.com.tw/articles/10237349