Nuxt - 异步操作后等待（this.$store.dispatch）

Question

我是 Nuxt 的新手，我面临着一个我不明白的问题。

如果我编码如下：

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

resp1.id 在第二个 axios 调用中正确设置 => 我们等待第一个调用完成，然后再进行第二个调用。

但是，当我在 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 中未定义。

我还尝试以“旧方式”管理 Promise：

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

结果还是一样=> id = undefined in action2

你们能告诉我哪里错了吗？

提前致谢。

最后注意：这两个动作在不同的商店中

Answer 1

Vuex 不允许多个参数，因此您必须将其作为对象传递，因此它可能如下所示：

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

然后在商店里：

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