[30天 Vue学好学满 DAY21] Vuex-4

Action

类似於mutation
     action -> mutation -> 改变状态 vs 直接提交mutation -> 改变状态
透过action提交原因:
     action 可包含非同步操作
接受 context 进行操作

context.commit
context.state
context.getters

简化写法

actions: {
  addTodo ({ commit }) {
    commit('addTodo') //提交 mutation
  }
}

分发(dispatch)

action 透过dispatch 方法进行分发。

store.dispatch('addTodo')

非同步操作(Async)

Action 待入payload参数

actions: {
    addTodoAsync ({ commit }, todo) {
        setTimeout(() => {
            commit('addTodo', todo)
        }, 1000)
    }
},

也支持以物件形式分发

// 以对象形式分发
store.dispatch({
  type: 'addTodoAsync',
  todo: this.todo
})

mapActions

methods: {
    add: function () {
      this.todo["_id"] = this.totalDone + 1;
      this.add("addTodoAsync", this.todo);
    },
    methods: {
      ...mapActions([
        // this.addTodoAsync(this.todo) -> store.dispatch('addTodoAsync', this.todo)
        "addTodoAsync", 
      ]),
      // 自定义名称
      ...mapActions({
        add: "addTodoAsync",
      }),
    },
},

组合

我们透过action进行非同步操作，那麽控制结束点也格外重要，才能进行下一步动作或是将action进行组合。
Action -> 返回Promise

Promise 非同步操作的结果
完成 resolve() -> then()
失败 reject() -> catch()
透过 new 实例化

Promise实作方式

return new Promise((resolve, reject) => {...async...resolve()})

透过 then 完成

store.dispatch('addTodoAsync').then(() => {
  // next step...
})

组合action
新增待办後寄出通知信

actions: {
  // step1
  addThenSend ({ dispatch, commit }) {
    return dispatch('addTodoAsync').then(() => {
      // step2
      commit('sendMessage')
    })
  }
}

结合await & async
await需包在async中，官网示例

// getData() & getOtherData() 皆返回 Promise

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一个dispatch若触发多个action -> 所以触发完成 -> 执行Promise
除了已经写到烂掉的action可执行非同步，mutation执行同步，mutation才能修改状态，其实在payload、map的用法上，两者是相同的。

雷: 若透过触发执行方法中的action或mutation，应避免方法名称与(action或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