VUEX - Многие mapActions с тем же именем действия на одной странице

Question

У меня есть несколько разных файлов для многих модулей. Некоторые из них имеют одно и то же имя действия

Есть страница, которая использует 2 или более mapActions для разных модулей. На моей странице есть что-то вроде этого:

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

Все мои модули имеют действие setDocumentImage Но проблема в том, что я должен вызывать их как: this.setDocumentImage(file)

Есть ли способ создать псевдоним для каждого из этих mapAction, который моя страница может различать? Или как я могу это исправить?

Answer 1

Вы можете использовать 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 с модулями здесь

Answer 2

Да, есть способ! Вот вы:

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