vue组合Aciton

2023年7月29日 203次阅读 来源: Funwt

Action通常是异步的，那么如何知道action什么时候结束呢？更重要的是，我们是如何才能组合多个action，以处理更加复杂的异步流程呢？
首先，store.dispatch可以处理被触发的action的处理函数返回的Promise，并且store.dispatch仍旧返回Promise:

actions: {
  actionA ({commit}) {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

现在你可以

store.disptch('actionA').then(() => {
  //...
})

actions: {
  // ...
  actionB ({ dispatch, commit }) {
    return dispatch('actionA').then(() => {
      commit('someOtherMutation')
    })
  }
}

//利用async/await, 假设 getData() 和 getOtherData() 返回的是 Promise
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

一个 store.dispatch 在不同模块中可以触发多个 action 函数。在这种情况下，只有当所有触发函数完成后，返回的 Promise 才会执行。

    原文作者：Funwt
    原文地址: https://www.jianshu.com/p/db8daac78ec2
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞