VUEX - 在同一页面上具有相同动作名称的许多 mapAction答案

【问题标题】：VUEX - Many mapActions with same action name on the same pageVUEX - 在同一页面上具有相同动作名称的许多 mapAction
【发布时间】：2020-07-13 11:59:09
【问题描述】：

对于很多模块，我有几个不同的文件。一些共享相同的操作名称

有些页面对不同的模块使用了 2 个或多个 mapAction 在我的页面上是这样的：

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

我所有的模块都有一个动作setDocumentImage 但问题是我必须像这样调用它们：this.setDocumentImage(file)

有没有办法为我的页面可以区分的每个 mapAction 创建一个别名？或者我该如何解决？

【问题讨论】：

标签： vue.js vuex vuex-modules

【解决方案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 的模块here

【讨论】：

【解决方案2】：

是的，有办法！你在这里：

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

【讨论】：