[Vuex] mapGetters사용 시, 여러 namespace에서 getters가져오는 방법

1/ namespace가 없는 모듈의 getters

namespace가 없는 모듈에서 getter를 가져올 때는, 아래와 같이 배열을 이용하여 가져올 수 있다.

import { mapGetters } from 'vuex';

export default {
 computed: {
   ...mapGetters(['someGetter', 'anotehrGetter']),
 },
}

 

 

2/ 하나의 namespace의 모듈의 getters

하나의 namespace의 모듈에서 getter를 가져올 때는, 첫번째 인수에 네임스페이스 이름 작성, 두번째 인수에는 배열에 가져올 getter를 작성하면 된다.

import { mapGetters } from 'vuex';

export default {
 computed: {
  ...mapGetters('moduleName', ['someGetter', 'anotherGetter'])
 }
}

 

 

 

Q. 그렇다면 여러 namespace의 모듈에서 getters를 가져올 때는 어떻게 해야할까?

1) 아래와 같이 mapGetters를 namespace별로 나눠서 여러개 작성해도 되고,

import { mapGetters } from 'vuex';

export default {
 computed: {
  ...mapGetters('moduleName', ['someGetter', 'anotherGetter']),
  ...mapGetters('moduleName2', ['newSomeGetter', 'newAnotherGetter'])
 }
}

 

 

2) 아래와 같이 객체를 이용해서 한 mapGetters 안에 '네임스페이스 명/가지고 올 getter명' 이렇게 작성해도 된다.

import { mapGetters } from 'vuex';

export default {
 computed: {
  ...mapGetters({
    someGetter: 'moduleName/someGetter',
    anotherGetter: 'moduleName/anotherGetter',
    newSomeGetter: 'moduleName2/newSomeGetter',
    newAnotherGetter: : 'moduleName2/newAnotherGetter'
    })
 }
}

 

 

 

참조 : https://stackoverflow.com/questions/54152596/vuex-mapactions-mapgetters-etc-mixing-namespaced-and-non-namespace-actions

Vuex mapActions, mapGetters, etc... Mixing namespaced and non-namespace actions/getters/mutations/state in the same call?

 

https://merrily-code.tistory.com/238

Vuex의 namespaced module 활용하기