Vuex getter가 정의되지 않은 상태로 반환됨

Vuex getter가 정의되지 않은 상태로 반환됨

여기 내 것이 있다.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

이것은 나에게 매우 혼란스럽다.로그에서 나는 다음과 같이 결론을 내릴 수 있다.

• 돌연변이 업데이트_STAPID 실행 정상
• state.staffID겟스태프 내부store.js에서 ID getter가 원하는 값을 출력함miow
• 그러나 위의 getter로부터 돌아오는 값은 어떻게든 돌아올 것이다.undefined
• 직원에게 접근하려고 하는 중ID 값 직접 사용this.$store.staffID또한 정의되지 않은 채 돌아올 것이다.

왜 저것들이undefined?

넌 실종됐어getters그리고state속성을 다음과 같이 추가하십시오.

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

참조URL: https://stackoverflow.com/questions/53558648/vuex-getters-return-undefined