Vuex getter returns 空

Question

我正在使用 vue 和 vuex 创建一个简单的用户登录系统。我的问题是当我想在我的商店中达到错误状态时，它 returns 为空。但是如果我在上面添加一个超时，它 returns 就是我想要的。我在突变部分添加了一条 console.log 消息，还在我的组件方法中添加了控制台日志。输出看起来像；

突变发生在组件之后。

我的店铺；

const state = {
    error: null
};

const getters = {
    getError: state => state.error,
};

const actions = {
    login({ commit }, user) {
        axios.post('http://localhost:3000/api/users/login', user).then(res => {
            //User auth part
        })
            .catch(err => { //I am committing to mutation
                commit('auth_error', err.response.data);
                return err.response.data;
            });
    }
};

const mutations = {//I am mutating my error state
    auth_error(state, err) {
        console.log('MUTATION MESSAGE:', err);
        state.error = err;
    },
};

我的组件看起来像；

import { mapActions, mapGetters } from "vuex";
export default {
  computed:{
    ...mapGetters(['getError']),
  },
  methods: {
    ...mapActions(["login"]),
    loginUser() {
      const user = {
        username: this.username,
        password: this.password,
      };
      this.login(user)//I am calling my store's method
        .then((res) => {
          if (!res.data.error) {
            console.log("Success");
          } else {
            console.log(res.data.message);
          }
        })
        .catch((err) => {//Here is my problem
          console.log('COMPONENT MESSAGE', this.getError);
          setTimeout(() => {//If i add timeout, it works.
            this.error = this.getError;
          }, 500);
        });
    },
  },
};

请告诉我是否缺少需要的部分。

Answer 1

您需要return您的操作中的 http 承诺：

login({ commit }, user) {
  return axios.post('http://localhost:3000/api/users/login', user).then(res => {
    //User auth part
  })
  .catch(err => { //I am committing to mutation
    commit('auth_error', err.response.data);
    return err.response.data;
  });
}

现在您可以从组件中的 promise 正确链接 .then。

Vuex getter returns 空

Vuex getter returns null

javascript

vue.js

vuex