VUEX — много действий mapActions с одинаковым именем действия на одной странице

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

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

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

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

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


vue.js vuex vuex-modules
person Leo Cavalcante    schedule 01.04.2020    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

person Utsav Patel    schedule 01.04.2020

arrow_upward
3
arrow_downward

Да есть способ! Вот, пожалуйста :

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