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 模块 here

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

VUEX - Many mapActions with same action name on the same page

vue.js

vuex-modules