CODEWITHSUNDEEP
laravelvue.jsvuex
Ramzkie
Ramzkie

Reputation: 33

Cannot access state by getters vuex vuejs

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

Upvotes: 0

Views: 407

Answers (1)

oshell
oshell

Reputation: 9123

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

Upvotes: 1

Related Questions