VUEX：无法获得最近的商店价值答案

【问题标题】：VUEX: can't get a recent store valueVUEX：无法获得最近的商店价值
【发布时间】：2019-12-20 12:04:06
【问题描述】：

我同时使用 Vuex 和 Axios。在调度一个动作之后，我需要从响应中得到一条错误消息。我不明白为什么我只有在第二次通话后才能得到正确的回应。

我在这里调度然后使用 getter。

this.$store.dispatch('registerUser', this.user);

this.errorMessage = this.getError;
console.log(this.errorMessage);

Getter 在这样的计算中被调用

  ...mapGetters({getError:"getErrorMsg"}),

通过 Axios 调用 API 的操作

 registerUser({commit}, user) {
        const form = new URLSearchParams();
        form.append('login', user.login);
        form.append('password', user.password);
        form.append('email', user.email);
        form.append('firstName', user.firstName);
        form.append('lastName', user.lastName);
        form.append('roles', user.roles);

        Axios.post(userUrl + '/create', form, config)
            .then(
                (response) => {
                    commit('setUser', response.data);
                    if (response.status === 206) {
                        commit('setErrorMessage', response.data);
                    }
                },
                (error) => {
                    commit('setErrorMessage', error.response.data);
                });

    }

那么，如何在拨打电话后得到正确的信息呢？

【问题讨论】：

返回 axios 帖子

标签： vue.js axios vuex

【解决方案1】：

您在 registerUser 操作中执行 AJAX 请求，因此它是异步操作。一旦请求得到响应，setErrorMessage 突变将在未来某个时间点执行，这发生在您访问 this.getError getter 之后。

您需要等待registerUser 完成以允许设置错误消息，然后再继续。

我会阅读异步 JavaScript 概念，例如 Promises、async/await 等。

您可以通过进行以下更改来解决此问题。首先需要返回Axios.post()返回的promise：

registerUser({commit}, user) {
  // code omitted

  return Axios.post(userUrl + '/create', form, config)
    .then(...)
}

现在当你派发动作时，你需要等待承诺解决：

this.$store.dispatch('registerUser', this.user)
  .finally(() => {
    this.errorMessage = this.getError;
    console.log(this.errorMessage);
  });

根据浏览器支持，您可能希望使用then，而不是finally。

【讨论】：