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分发actionC，并从actionB分发actionB。
但是，actionA将在actionC完成之前得到解决。

我应该如何应对这种情况？

Answer 1

如果要避免actionA在actionC完成之前解决，则需要等待分派actionC操作。

您需要像这样重写actionB：

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)
}

如何从动作分派另一个动作并在Vuex中分派另一个动作

1 个答案: