Vue.js VUEX-同一页面上具有相同操作名称的多个mapActions

我有很多不同的模块文件。 其中一些共享相同的操作名称

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

 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
  }
})

方法：{
…映射操作({
文档：['setDocumentImage']，
文档地址：['setDocumentImage']，
自拍：['setDocumentImage']
}),
}

我的所有模块都有一个action

setDocumentImage

但问题是我必须像这样调用它们：

this.setDocumentImage（文件）

是否有一种方法可以为我的页面可以区分的每个mapAction创建别名？

---

或者我该如何修复它

是的，有办法！给你：

方法：{
…mapActions（'documents'，{setDocumentImage:'setDocumentImage'}），
…映射操作（'documentAddress'，{setDocumentAddressImage:'setDocumentImage'}），
…映射动作（'selfie'，{setSelfieDocumentImage:'setDocumentImage'}），
}

是的，有办法！给你：

方法：{
…mapActions（'documents'，{setDocumentImage:'setDocumentImage'}），
…映射操作（'documentAddress'，{setDocumentAddressImage:'setDocumentImage'}），
…映射动作（'selfie'，{setSelfieDocumentImage:'setDocumentImage'}），
}

如果您在组成商店时使用模块，则可以使用

名称空间

大概是这样的：

 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')

有关使用模块的
名称空间
的详细信息
如果您在组成存储时使用模块，则可以使用
名称空间

大概是这样的：

 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')

有关使用模块的名称空间的详细信息