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

[tkaizer98]

trafficstars

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.

[m-ripper]

Can you provide more context? How does your store file look like? Providing more information about these modules would also be helpful.

[neolitec]

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.

[giserman001]

I encountered the same problem. When I combined 'vuex-class' with 'vuex-module-decorators', the same error occurred

here is the outline of my code: store/module/user : views/home.vue:

[rurusyu]

I encountered the same problem.

[preetishhs]

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.

[duckytutu]

@preetishhs i got this problem instead when remove name in @Module 😄

[preetishhs]

@duckytutu Oh. I didn't get any such errors. Take a look at this Repo. I created this project just last week for an article.

~~https://gitlab.com/preetishhs/ts-vue-sample~~ https://github.com/preetishhs/Vue-typescript-example

I use vuex-module-decorators. I used to get the same error but when I removed name it started to work fine.

[MitchellFry]

Hey @preetishhs , thanks for sharing your demo - I think it might be set to private, I'm getting a 404 error.

[preetishhs]

@MitchellFry Sorry, I had moved it to Github. Please check this https://github.com/preetishhs/Vue-typescript-example

[ghost]

I can also confirm this bug (actually I came here by googling the error message). I have two modules with a name attribute in @Module, and I can not call actions, same stacktrace (but mutations work fine).

Removing the name attribute fixed this.

[RenatoRJF]

By removing the property name from module decorator also "solved" to me

[NicholasStone]

Remove the name property works fine with mine either. (Using Nuxt by the way.) But WHY it works ???

[hisuwh]

I'm also using vuex-class and Removing name worked for me also.

[day-after-day]

please see notice That works only in dynamic modules. , so you should register modules likes thit.

@Module({dynamic: true, store, name: 'mm'})

even so, you can't use it directly.

we need to load it before we use it.

  import { getModule } from 'vuex-module-decorators'
  import YourModules from 'xxx'
  import store from '@/store'

now，we should do it in one of two ways: 1,

  // Use its related properties and methods directly
  getModule (YourModules )
  store.dispatch('name/xxxx')

2,

   const yourModule =  getModule (YourModules )
   yourModule.xxxx()