VUEX - 여러 맵동일한 작업 이름을 가진 작업

VUEX - 여러 맵동일한 작업 이름을 가진 작업

나는 많은 모듈을 위한 여러 가지 다른 파일들을 가지고 있다.공유된 일부 작업 이름

2개 이상의 mapActions를 사용하는 페이지가 있음다른 모듈에 대해 내 페이지에는 다음과 같은 내용이 있다.

methods: {
    ...mapActions({
        documents: ['setDocumentImage'],
        documentAddress: ['setDocumentImage'],
        selfie: ['setDocumentImage']
    }),
}

모든 모듈에 동작이 있음setDocumentImage그러나 문제는 다음과 같이 그들을 호출해야 한다는 것이다.this.setDocumentImage(file)

이 맵 각각에 대해 별칭을 만드는 방법이 있는가?내 페이지가 구분할 수 있는 동작아니면 어떻게 고칠 수 있을까?

그래, 방법이 있어! 여기 있어:

methods: {
    ...mapActions('documents', { setDocumentImage: 'setDocumentImage' }),
    ...mapActions('documentAddress', { setDocumentAddressImage: 'setDocumentImage' }),
    ...mapActions('selfie', { setSelfieDocumentImage: 'setDocumentImage' }),
}

사용할 수 있다namespacing만약 당신이 당신의 스토어를 구성하는 데 모듈을 사용하고 있다면.

이와 비슷한 것:

 const moduleA = {
  namespaced: true, //namespacing set to true.
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    namespacedModuleA: moduleA,
    b: moduleB
  }
})

그럼 네 안에서mapAction다음 작업을 수행할 수 있음:

methods: {
    ...mapActions({
        actionOfA: ['nameSpacedModuleA/actionOfA'],
        actionOfB: ['actionOfB'],
    }),
}

사용하지 않으려는 경우mapActions, 또한 할 수 있다.

this.$store.dispatch('nameSpacedModuleA/actionOfA')

에 대해 자세히 알아보기namespacing여기 모듈로

참조URL: https://stackoverflow.com/questions/60975910/vuex-many-mapactions-with-same-action-name-on-the-same-page