在vuex中组合使用多个action

Action 通常是异步的，那么如何知道 action 什么时候结束呢？更重要的是，如何才能组合使用多个action，处理更加复杂的异步流程，在前一个action完成后再进行后边action的处理。

业务逻辑场景：存在2个action，actionA和actionB，先执行完actionA才能执行actionB。

首先，$store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 $store.dispatch 仍旧返回 Promise：

actions: {
    
    
  actionA ({
    
     commit }) {
    
     // 这里使用了对象的解构赋值
    return new Promise((resolve, reject) => {
    
    
      setTimeout(() => {
    
    
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

第一种，在组件里派发action：

this.$store.dispatch('actionA').then(() => {
    
    
  // 派发其它的 action，编写其它逻辑代码
})

第二种，在另一个action中派发：

actionB({
    
    dispatch, commit}) {
    
    
  // then方法返回的是一个新的 Promise 实例，可以 return 出去，继续链式调用
  return dispatch('actionA').then(() => {
    
    
    commit('someOtherMutation');  // 在 actionA执行完成之后，再执行 actionB的代码
  })
}

第三种，使用 async/await 的写法：

// 假设 getData() 和 getOtherData() 返回的是 Promise

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

参考资料：组合action | Vuex官网

前端学习交流QQ群，群内学习讨论的氛围很好，大佬云集，期待您的加入：862748629 点击加入