技術標籤：Vuex

用於處理非同步任務

如果通過非同步操作變更資料，必須通過Action，而不能使用Mutation，但是在Action中還是要通過觸發Mutation的方式間接變更資料

我們可以通過以下方式進行修改：

   <p><button @click="btnHandler3">+1 Async</button></p>

  // 非同步修改倉庫資料 最終只能還是mutations修改倉庫資料
  actions: {
    // context可以認為是Vuex.store的例項物件
    addAsync(context)
 
 {
      //  只負責非同步行為
      setTimeout(() => {
        // 在actions中不能直接修改state中的資料
        // 如果要修改資料，必須通過context.commit()觸發某個mutations才行
        context.commit('add')
      }, 1000)
    }
  },

  // 修改倉庫資料的唯一方式
  // 只有mutation中定義的函式，才有權利修改state的資料
  mutations: {
    add(state) {
      // setTimeout(() => {
      //   state.count++
 

      // }, 1000)
      state.count++
    },

    btnHandler3() {
    // 這裡的dispatch函式，專門用來觸發action
        this.$store.dispatch('addAsync')
    },