Nuxt - Wait after async action (this.$store.dispatch)

Question

I'm new to Nuxt and I'm facing an issue that I don't understand.

If i code something like:

const resp1 = await this.$axios.$post('urlCall1', {...dataCall1});
this.$axios.$post('urlCall2', {...dataCall2, resp1.id});

The resp1.id is properly set in the 2nd axios call => we wait for the first call to be completed before doing the 2nd one.

However, when I define asyn actions in my vuex store ex:

  async action1({ commit, dispatch }, data) {
    try {
      const respData1 = await this.$axios.$post('urlCall1', { ...data });
      commit('MY_MUTATION1', respData1);
      return respData1;
    } catch (e) {
      dispatch('reset');
    }
  },
  async action2({ commit, dispatch }, data, id) {
    try {
      const respData2 = await this.$axios.$post('urlCall2', { ...data });
      commit('MY_MUTATION2', respData2);
    } catch (e) {
      dispatch('reset');
    }
  }

and then in my vue component I fire those actions like:

const resp1 = await this.$store.dispatch('store1/action1', data1);
this.$store.dispatch('store2/action2', data2, resp1.id);

resp1.id is undefined in action2.

I also tried managing promise the "old way":

this.$store.dispatch('store1/action1', data1).then(resp1 => this.$store.dispatch('store2/action2', data2, resp1.id))

The result is still the same => id = undefined in action2

Can you guys please tell me where I'm wrong ?

Thanks in advance.

Last note: the 2 actions are in different stores

Answer 1

Vuex doesn't allow multiple arguments, so you have to pass it through as an object, so it could look like:

this.$store.dispatch('store2/action2', { ...data2, id: resp1.id });

And then in the store:

async action2({ commit, dispatch }, { id, ...data }) {
    try {
      const respData2 = await this.$axios.$post('urlCall2', { ...data });
      commit('MY_MUTATION2', respData2);
    } catch (e) {
      dispatch('reset');
    }
}