vue.js - Nuxt - 非同期アクションの後に待機 (this.$store.dispatch)

Question

Nuxt は初めてで、理解できない問題に直面しています。

次のようなコードを作成した場合:

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

resp1.id は 2 番目の axios 呼び出しで適切に設定されます => 2 番目の呼び出しを行う前に、最初の呼び出しが完了するのを待ちます。

ただし、vuex ストア 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');
    }
  }

次に、vue コンポーネントで次のようなアクションを実行します。

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

resp1.id は action2 で定義されていません。

私はまた、約束を「古い方法」で管理しようとしました:

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

結果は同じです => id = action2 で未定義

どこが間違っているのか教えてください。

前もって感謝します。

最後の注意: 2 つのアクションは別のストアにあります