Can't dispatch an action in a vuex module from another vuex module
See original GitHub issueI am using two namespaced modules. In one module I have an action in which I am trying to commit a mutation from the other module. I am getting this error:
Error: ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access this.someMutation() or this.someGetter inside an @Action?
That works only in dynamic modules.
If not dynamic use this.context.commit("mutationName", payload) and this.context.getters["getterName"]
Error: Could not perform action createSocket
at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:334:37)
at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:114:23)
at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:95:53)
at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:88:71)
at new Promise (<anonymous>)
at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:84:12)
at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:297:20)
at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:740:23)
at Store.dispatch (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:445:15)
at Store.boundDispatch [as dispatch] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:339:21)
Error: ERR_STORE_NOT_PROVIDED: To use getModule(), either the module
should be decorated with store in decorator, i.e. @Module({store: store}) or
store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)
at value (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:242:31)
at getModule (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:27:36)
at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:305:46)
at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:114:23)
at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:95:53)
at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:88:71)
at new Promise (<anonymous>)
at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:84:12)
at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:297:20)
at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:740:23)
at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:328:35)
at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:114:23)
at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:95:53)
at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:88:71)
at new Promise (<anonymous>)
at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:84:12)
at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:297:20)
at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:740:23)
at Store.dispatch (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:445:15)
at Store.boundDispatch [as dispatch] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:339:21)
here is the outline of my code:
socketStore.ts
Module({ namespaced: true, store: store, name: "socketStore" })
export default class SocketStore extends VuexModule {
@Action
createSocket(isInitial: boolean): any {
//THIS ACTION FAILS
}
}
I call this action in Home.vue with
created() {
this.$store.dispatch("socketStore/createSocket", true);
}
It seems to work when I call the same function (createSocket) as a mutation. I cannot do this however because I need to call other mutations inside of it.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:6
- Comments:14 (1 by maintainers)
Top Results From Across the Web
Is there a way to dispatch actions between two namespaced ...
E.g. I have Vuex modules "gameboard" and "notification". Each are namespaced. I would like to dispatch an action from the gameboard module ......
Read more >Dispatch an action in another Vuex module - Koen Woortman
In order to call an action in a different Vuex module you need to pass {root: true} as the third argument of the...
Read more >How to access Vuex module actions from a component
I define a store with two modules, and I'm trying to access one module action, I tried to do this.$store.dispatch('load'); But I get:...
Read more >Modules | Vuex
Namespaced getters and actions will receive localized getters , dispatch and commit . In other words, you can use the module assets without ......
Read more >Cannot dispatch namespaced action from a separate module ...
I am calling the ADD action with another createNamespacedHelpers for the activities namespace. I'm also using the { root: true } option, indicated...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
The workaround is removing the
name
attribute in@Module
decorator and it will work without any errors.I use
vuex-module-decorators
withvuex-class
and it is working fine without errors.Same for me, when I’m in a module I’m not able to call an action from an action in another module.
The authentication module looks like:
The error is the same as @tkaizer98 mentioned.