Nuxt - 异步操作后等待 (this.$store.dispatch)答案

【问题标题】：Nuxt - Wait after async action (this.$store.dispatch)Nuxt - 异步操作后等待 (this.$store.dispatch)
【发布时间】：2020-09-09 19:34:16
【问题描述】：

我是 Nuxt 的新手，遇到了一个我不明白的问题。

如果我编写如下代码：

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

在第二次 axios 调用中正确设置了 resp1.id => 我们在执行第二次调用之前等待第一次调用完成。

但是，当我在我的 vuex 商店中定义异步操作时：

  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 = undefined in action2

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

提前致谢。

最后一点：这 2 个动作在不同的商店中

【问题讨论】：

请求是否成功完成？也许 catch() 激活并且没有返回值 - 这就是你看到 undefined 的原因

标签： vue.js vuex nuxt.js nuxtjs

【解决方案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');
    }
}

【讨论】：