在命名空间模块中调用使用方括号（计算机属性名称）定义的 Vuex 操作

Posted 2023-02-23

【中文标题】在命名空间模块中调用使用方括号（计算机属性名称）定义的 Vuex 操作

【英文标题】：Calling Vuex actions defined using square brackets (computer property names) in namespaced modules

【发布时间】：2021-01-18 02:39:44

【问题描述】：

我见过很多次其他开发人员使用计算属性名称来定义动作和突变名称，例如。

export const SOME_ACTION = 'someAction'

然后：

[SOME_ACTION]( commit )  ... 

这反过来又让您可以使用这种简洁的方式调度操作：

this.$store.dispatch(SOME_ACTION)

有点像 NgRX，我喜欢。但是 Vuex 命名空间模块呢？有没有办法巧妙地调度动作，只提供 SOME_ACTION 变量？

【参考方案1】：

对于任何想知道我是如何计算出来的人：

我已经使用 vuex 中的 createNamespacedHelpers 来首先准备助手：

const  mapGetters, mapActions  = createNamespacedHelpers('some/nested/module')

之后你可以像这样映射它们：

...mapActions([SOME_ACTION, SOME_OTHER_ACTION])

例如，像这样调用：

this[SOME_ACTION]()

【参考方案2】：

这对你有什么作用？

...mapActions(
  nsOne: 'namespaced/nsOne',
  nsTwo: 'namespace/nsTwo',
  nonNsOne: 'nonNsOne', 
  nonNsTwo: 'nonNsTwo'
)

然后调用

this.nsOne()