Calling Vuex actions defined using square brackets (computer property names) in namespaced modules

1
votes

I've seen many times other devs using computed property names to define actions & mutations names, eg.

export const SOME_ACTION = 'someAction'

And then:

[SOME_ACTION]({ commit }) { ... }

Which in turn lets you dispatch actions using this neat way:

this.$store.dispatch(SOME_ACTION)

Kinda feels like NgRX, which I like. But what about Vuex namespaced modules? Is there any way to dispatch actions neatly, providing only the SOME_ACTION var?

2
vue.jsvuex

2 Answers

1
votes

To anyone wondering how did I figure it out:

I've used createNamespacedHelpers from vuex to prepare the helpers first:

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

Afterwards you can map 'em like that:

...mapActions([SOME_ACTION, SOME_OTHER_ACTION])

And call, for example, like this:

this[SOME_ACTION]()
-1
votes

How does this work for you?

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

and then call with

this.nsOne()