The implementation in Vuex actions is structured as follows.
async actionX({ commit, dispatch }) {
const data = this.$axios.$get(`/apiUrl`)
await Promise.all([
dispatch('actionY', { data: data }),
dispatch('actionZ'),
]).then(() => {
commit('mutationA', data)
})
}
async actionY({ commit, dispatch }, { data }) {
await this.$axios.$get('/apiUrl', { params: data }).then(res => {
if (res.length === 0) {
dispatch('actionK', { data: data })
}
commit('mutationB', res)
})
}
async actionZ({ commit, dispatch }, { data }) {
await this.$axios.$get('/anotherUrl', { params: data }).then(res => {
commit('mutationC', res)
})
}
Dispatch actionY fromactionX and dispatch actionZ fromactionY depending on the result of actionY.
However, actionX will be resolved beforeactionZ completes.
What strategies can be used to handle such scenarios effectively?