question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't dispatch an action in a vuex module from another vuex module

See original GitHub issue

I 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:open
  • Created 4 years ago
  • Reactions:6
  • Comments:14 (1 by maintainers)

github_iconTop GitHub Comments

9reactions
preetishhscommented, Apr 2, 2020

The workaround is removing the name attribute in @Module decorator and it will work without any errors.

@Module({ namespaced: true })

I use vuex-module-decorators with vuex-class and it is working fine without errors.

2reactions
neoliteccommented, Sep 13, 2019

Same for me, when I’m in a module I’m not able to call an action from an action in another module.

this.context.dispatch('authentication/login', null, { root: true })

The authentication module looks like:

@Module({ name: 'authentication', namespaced: true })
export default class AuthenticationModule extends VuexModule {
    @Action
    public async login(): Promise<void> {
        return new Promise((resolve) => {
            console.log('You\'re logged in.')
            resolve()
        })
    }
}

The error is the same as @tkaizer98 mentioned.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found