javascript - 如何同步调度一组 Vuex 操作(等待一组稳定，然后调度另一组)

Question

我有几个返回 axios Promises 的 Vuex 操作。 我想运行操作 X 几次，在这些操作结束后，我想运行操作 Y 几次，这是我尝试过的:

async save() {
  const ingredients = [{ 1 }, { 2 }]
  const ingredients_actions = ingredients.map(async ing => await this.$store.dispatch('saveIngredients', ing))
  const recipes = [{ a }, { b }, { c }]
  const recipes_actions = recipes.map(async recipe => await this.$store.dispatch('saveRecipe', recipe)

  await Promise.all(ingredients_actions)
  await Promise.all(recipes_actions)
}

在控制台的网络选项卡中，我希望看到配料_ Action 调用发生，然后看到食谱_ Action 发生。相反，我看到这些 Action 在各处发生，而且根本不同步。

如何使所有的配料 Action 发生在食谱 Action 之前？欢迎所有建议。

Answer 1

这是预期的吗？

async save() {
  const ingredients = [{ 1 }, { 2 }]
  const ingredients_actions = ingredients.map(async ing => await this.$store.dispatch('saveIngredients', ing))
  await Promise.all(ingredients_actions)

  const recipes = [{ a }, { b }, { c }]
  const recipes_actions = recipes.map(async recipe => await this.$store.dispatch('saveRecipe', recipe)
  await Promise.all(recipes_actions)
}