prosource

vuex 모듈에서 루트 상태를 기반으로 상수를 전역적으로 정의하는 방법

probook 2023. 6. 22. 21:58
반응형

vuex 모듈에서 루트 상태를 기반으로 상수를 전역적으로 정의하는 방법

vuex 모듈에서는 각 작업에 대해 루트 상태에서 동일한 값을 얻어야 합니다.따라서 다음과 같이 수행합니다.

export const actions = {

    action1({ commit, rootState }, payload) {
        const companyId = rootState.userProfile.companyId;
        ....
    },
    action2({ rootState }, payload) {
        const companyId = rootState.userProfile.companyId;
        ....
    },
    ....

}

반복하는 대신 모듈에서 이 상수를 한 만 선언할 수 있는 방법이 있습니까?

const companyId = rootState.userProfile.companyId;

각각의 행동에서?

당신은 당신의 모듈 파일에 당신의 스토어를 가져오고 Getter를 생성하여 당신의 가치를 얻을 수 있습니다.companyId.

게터를 사용하지 않으면 결과적으로companyId한 번만 설정되고 작업 런타임에서 실제 값을 얻지 못하는 경우:

import store from './index.js'

const companyId = () => store.state.userProfile.companyId

export const actions = {

    action1({ commit }, payload) {
        commit('doSomething', companyId())
        ...
    },
    action2({ }, payload) {
        ...
    },
    ...

}

당신은 또한 당신의 모듈에 게터를 만들어 그것을 얻을 수 있습니다.companyId:

export const actions = {

  action1({ getters }, payload) {
    console.log(getters.companyId)
  }
}

export const getters = {
  companyId (state, getters, rootState) {
    return rootState.userProfile.companyId
  }
}

언급URL : https://stackoverflow.com/questions/54419146/in-a-vuex-module-how-to-globally-define-a-const-based-on-rootstate

반응형