Vuex getter 返回 null

Question

I am creating a simple user login system with vue and vuex. My problem is when I want to reach error state that in my store, it returns null. But if I add a timeout on that, it returns what I want. I added a console.log message in the mutation section, and also I added console log in my component method. Output looks like;

Mutation comes after component.

My store;

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

My component looks like;

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

Please tell me if there are missing parts that needed.

Answer 1

You need to return the http promise from your action:

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

Now you can properly chain .then from the promise in the component.