javascript - Vuex getter 返回 undefined

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 inside getStaffID getter in store.js 将输出所需的值，即 miow
• 但是上面 getter 的返回值会以某种方式返回 undefined
• 尝试使用 this.$store.staffID 直接访问 staffID 值也会返回 undefined

为什么那些 undefined？

Answer 1

你缺少 getters 和 state 属性，所以添加它们:

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