Question

我正在一起使用Vuex和Axios。在分派动作后，我需要从响应中获取错误消息。我不明白为什么只有在第二次通话后才能得到正确的回复。

我在这里调度，然后使用吸气剂。

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

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

以这种方式计算出的字母叫来

  ...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);
                });

    }

那么，如何在拨打电话后获得正确的消息？

Answer 1

您正在registerUser动作中执行AJAX请求，因此这是异步操作。一旦请求得到响应，就会在以后的某个时间点执行setErrorMessage变异，发生在您访问this.getError getter的之后。

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

我将阅读Promises，async / await等异步JavaScript概念。

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

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);
  });

取决于浏览器的支持，您可能希望使用finally而不是then。

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

1 个答案: