Получатели Vuex возвращают неопределенный

Question

Вот мой 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)
        }
    }
  })

А в моем компоненте есть кнопка, которая будет вызывать это:

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

В полученном журнале будет отображаться это:

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

Это очень смущает меня.Из журнала я могу сделать вывод, что:

• мутация UPDATE_STAFFID работает нормально
• state.staffID внутри getStaffID getter в store.js выведет желаемое значение, равное miow
• но возвращаемое значение из получателя выше каким-то образом вернет undefined
• , попытка получить доступ к значению staffID напрямую с помощью this.$store.staffID также вернет неопределенное

Почему этиundefined

Answer 1

Вам не хватает свойств getters и state, поэтому добавьте их как:

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