javascript - 如何从一个 Action 派发另一个 Action 并在 Vuex 中派发另一个 Action

Question

在 Vuex 操作中，我们有以下实现。

async actionA({ commit, dispatch }) {
  const data = this.$axios.$get(`/apiUrl`)
  await Promise.all([
    dispatch('actionB', { data: data }),
    dispatch('actionOthers'),
  ]).then(() => {
    commit('mutationA', data)
  })
}

async actionB({ commit, dispatch }, { data }) {
  await this.$axios.$get('/apiUrl', { params: data }).then(res => {
    if (res.length === 0) {
      dispatch('actionC', { data: data })
    }
    commit('mutationB', res)
  })
}

async actionC({ commit, dispatch }, { data }) {
  await this.$axios.$get('/anotherUrl', { params: data }).then(res => {
    commit('mutationC', res)
  })
}

根据 actionB< 的结果，从 actionA 调度 actionB 并从 actionB 调度 actionC/。
但是，actionA 将在 actionC 完成之前解析。

遇到这样的情况我该如何应对？

Answer 1

如果您想避免 actionA 在 actionC 完成之前解析，您需要等待调度 actionS 操作。

您需要像这样重写您的actionS:

async actionB({ commit, dispatch }, { data }) {
    const res = await this.$axios.$get('/apiUrl', { params: data })
    if (res.length === 0) {
        await dispatch('actionC', { data: data })
    }
    commit('mutationB', res)
}