时间戳

首页 > 解决方案 > VUEX：无法获得最近的商店价值

vue.js - VUEX：无法获得最近的商店价值

问题描述

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

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

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

    }

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

标签： vue.jsaxiosvuex

解决方案

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

在继续之前，您需要等待registerUser完成以允许设置错误消息。

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

您可以通过进行以下更改来解决此问题。首先，您需要返回由返回的承诺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.

推荐阅读