ChatGPT解决这个技术问题 Extra ChatGPT

Is there a way to dispatch actions between two namespaced vuex modules?

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?


z
zcoop98

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.


This is the only hit on the internet for my search for a solution. Thanks for answering.
To be fair, it is documented here vuex.vuejs.org/en/modules.html at "Accessing Global Assets in Namespaced Modules". Though it is kind of awkward to take in.
I love vue, but it seems to me that vuex adds more layers of difficulty rather than make it simpler. Now I know that this is not the purpose of vuex but still, isn't it annoying that I always need to be aware of some conventions like in this example 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 opinion
You can use this.dispatch. It doesn't need {root: true}. This is global.
No you have to use {root: true}. The case you meant is probably dispatching to a child module, which indeed (and obviously) does not need this flag.
K
Kaddu Livingstone

dispatch('mobuleB/actionB', null, { root: true })


关注公众号,不定期副业成功案例分享
Follow WeChat

Success story sharing

Want to stay one step ahead of the latest teleworks?

Subscribe Now