I have a situation where I need to execute multiple Vuex actions that return axios Promises. Specifically, I want to run action X several times and then follow it up with action Y several times. Here's my current approach:
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)
}
When checking the network tab in the console, I expect to see the ingredients_actions calls being made first, followed by the recipes_actions. However, the actions seem to be executed out of order and not synchronously as intended.
I'm looking for suggestions on how to ensure all the ingredients_actions are completed before the recipes_actions start running. Any advice or tips would be greatly appreciated.