Check out my code snippet from store.js :
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)
}
}
})
In one of my components, there's a button that triggers the following:
this.$store.commit('UPDATE_STAFFID','miow')
console.log("store.getStaffID: " + this.$store.getStaffID);
console.log("store.staffID: " + this.$store.staffID);
The log results in:
20 mutations: miow
13 getStaffID: miow
store.getStaffID: undefined
store.staffID: undefined
This situation is puzzling. Based on the log, I can deduce that:
- The mutation UPDATE_STAFFID executes successfully
state.staffIDinside the getStaffID getter in store.js correctly displays the value asmiow- However, for some reason, the getter returns
undefined - Attempting to directly access the staffID value using
this.$store.staffIDalso results in undefined
What could be causing these issues with undefined values?