Is it possible to dispatch an action between namespaced modules?
E.g. I have Vuex modules "gameboard" and "notification". Each are namespaced. I would like to dispatch an action from the gameboard module in the notification module.
I thought I could use the module name in the dispatch action name like this:
// store/modules/gameboard.js
const actions = {
myaction ({dispatch}) {
...
dispatch('notification/triggerSelfDismissingNotifcation', {...})
}
}
// store/modules/notification.js
const actions = {
triggerSelfDismissingNotification (context, payload) {
...
}
}
But when I try to do this I get errors that make me think Vuex is trying to dispatch an action within my gameboard module:
[vuex] unknown local action type: notification/triggerSelfDismissingNotification, global type: gameboard/notification/triggerSelfDismissingNotification
Is there a way of dispatching actions from a given Vuex module to another, or do I need to create some kind of a bridge in the root Vuex instance?
You just need to specify that you're dispatching from the root context:
// from the gameboard.js vuex module
dispatch('notification/triggerSelfDismissingNotifcation', {...}, {root:true})
Now when the dispatch reaches the root it will have the correct namespace path to the notifications module (relative to the root instance).
This is assuming you're setting namespaced: true
on your Vuex store module.
dispatch('mobuleB/actionB', null, { root: true })
Success story sharing
notification/trigger
, then if i want it to be a little bit more generic I do${NOTIF_TYPE_NAME}/${NOTIF_TRIGGER_ACTION}
, still need the slash, or even create a helper function for this, I feel that when I want my App to be more modular I pay a lot more than I get. This is my opinionthis.dispatch
. It doesn't need{root: true}
. This is global.{root: true}
. The case you meant is probably dispatching to a child module, which indeed (and obviously) does not need this flag.