CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvuex
imin
imin

Reputation: 4578

Vuex getters return undefined

Here's my store.js code :

export const store = new Vuex.Store({
    state: {
        staffID: '',
        count: 0,
    },
    getters:{
        getStaffID: state => {
            console.log("13 getStaffID: " + state.staffID)
            return state.staffID;
        }
    },
    mutations: {
        UPDATE_STAFFID: (state,value) => {
            state.staffID = value
            console.log("20 mutations: " + state.staffID)
        },
    },
    actions: {
        update_staffID: (context, payload) => {
            context.commit("UPDATE_STAFFID", payload)
        }
    }
  })

And in my component, there's a button which will call this:

this.$store.commit('UPDATE_STAFFID','miow')
console.log("store.getStaffID: " + this.$store.getStaffID);
console.log("store.staffID: " + this.$store.staffID);

The resulting log will display this:

20 mutations: miow
13 getStaffID: miow
store.getStaffID: undefined
store.staffID: undefined

This is very confusing for me. From the log, I can conclude that:

Why those undefined?

Upvotes: 1

Views: 4563

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You're missing getters and state properties so add them like :

 console.log("store.getStaffID: " + this.$store.getters.getStaffID);
 console.log("store.staffID: " + this.$store.state.staffID);

Upvotes: 3

Related Questions