Cannot access state by getters vuex vuejs

Question

I am new to vuex I want to access user object that is inside in state by the getters getUser() method, I tried to call this console.log(this.$store.getters.getUser); in mounted method but no results. I tried to console log inside mutations and it return the user object. I also followed documentations and googled the solutions but nothing happen

What else am I missing?

store.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
state: {
    user: {},
},
getters: {
    getUser: state => {
       return state.user
     }
    
},
mutations: {
    auth_user(state,data) {
        state.user = data
    }
 },
actions: {
    fetchAuthUser(context){
        axios.get('/user-data').then(response => {
            context.commit("auth_user",response.data)
        }).catch({});
    }
}, 

 })


 export default store

Index.js

  mounted(){
  // this.auth_user;
   this.getCategories();
   this.$store.dispatch('fetchAuthUser', this.auth_user);
    console.log(this.$store.getters.getUser);
},

try console.log(this.$store.state.state.user)

Kamlesh Paul
– Kamlesh Paul

2020-12-17 11:21:43 +00:00
Commented Dec 17, 2020 at 11:21 — Kamlesh Paul
– Kamlesh Paul, Commented Dec 17, 2020 at 11:21

oshell · Accepted Answer · 2020-12-17 11:09:21Z

1

Your action is async and should return a promise.

fetchAuthUser(context){
    return axios.get('/user-data').then(response => {
        context.commit("auth_user",response.data)
    }).catch({});
}

In your mounted you can use then to handle data.

mounted(){
   // this.auth_user;
   this.getCategories();
   this.$store.dispatch('fetchAuthUser', this.auth_user).then(() => {
      console.log(this.$store.getters.getUser);
   });
}

answered Dec 17, 2020 at 11:09

oshell

9,1511 gold badge31 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

oshell Over a year ago

then please consider accepting the answer.

Collectives™ on Stack Overflow

Cannot access state by getters vuex vuejs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related