programing

다른 vuex 모듈에서 getter에 액세스하는 방법

itsource 2022. 7. 28. 22:52
반응형

다른 vuex 모듈에서 getter에 액세스하는 방법

vuex getter 내에서는 다음과 같이 다른 vuex 모듈에서 상태에 액세스할 수 있습니다.

pages: (state, getters, rootState) => {
    console.log(rootState);
}

상태가 아닌 다른 vuex 모듈에서 getter에 접속하려면 어떻게 해야 하나요?

필터라고 하는 다른 vuex 모듈이 있어 액세스해야 합니다.이러한 모듈을 사용해 보았습니다.

rootState.filters.activeFilters

어디에activeFilters제 게터인데 이게 안 돼요.사용.rootState.filters.getters.activeFilters또, 동작하지 않습니다.

서류를 뒤져봐야 했는데 찾았어요

https://vuex.vuejs.org/en/api.html

(이 페이지에서 Ctrl+F로 RootGetters 검색)

코드는 다음과 같습니다.

pages: (state, getters, rootState, rootGetters) => {}

모든 rootGetters는 글로벌하며 모듈명으로 스테이트를 프리픽스 하는 rootState와 같이 사용하지 않도록 주의해 주세요.

다음과 같이 다른 모듈에서 getter를 호출하기만 하면 됩니다.

rootGetters.activeFilters

바라건대, 이것은 미래에 이것에 부딪히는 사람에게도 도움이 될 것이다.

글로벌/네임스레이드에 접속하는 경우getter모듈로부터, 다음과 같은 방법을 얻을 수칙은 다음과 같습니다.

getters: {
    // `getters` is localized to this module's getters
    // you can use rootGetters via 4th argument of getters
    someGetter (state, getters, rootState, rootGetters) {
        rootGetters.someOtherGetter //'someOtherGetter' global getter
        rootGetters['bar/someOtherGetter'] //'bar/someOtherGetter' namespaced getter
    },
    ...
},

여기 접속하는 방법이 있습니다.actions의 사용방법도 포함됩니다.action그리고.mutations참조를 위해.

actions: {
      // dispatch and commit are also localized for this module
      // they will accept `root` option for the root dispatch/commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
      
        rootGetters.someGetter //'someGetter' global getter
        rootGetters['bar/someGetter'] //'bar/someGetter' namespaced getter

        dispatch('someOtherAction') //'someOtherAction' local action
        dispatch('someOtherAction', null, { root: true }) //'someOtherAction' namespaced action

        commit('someMutation') //'someMutation' local mutation
        commit('someMutation', null, { root: true }) //'someMutation' namespaced mutation
      },
      ...
    }
  }

언급URL : https://stackoverflow.com/questions/45999623/how-to-access-the-getter-from-another-vuex-module

반응형