VUEX - 同一页面上具有相同操作名称的许多映射操作

Question

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

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

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

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

有没有一种方法可以为我的页面可以区分的每个 mapAction 创建别名？或者我该如何修复它？

Answer 1

是的，有办法！给你 ：

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

Answer 2

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有关模块的更多信息请参见此处