vuex-module-decorators: ERR_STORE_NOT_PROVIDED with simple module

I have a simple module:

import { Module, VuexModule, Mutation, Action, MutationAction } from 'vuex-module-decorators'
import { User } from '../models'

@Module({namespaced: false, name: 'user'})
export default class UserModule extends VuexModule {
  user: User | null = null
  profile: Profile = {}

  @Mutation
  setUserM(user: User) {
    this.user = user
  }

  @Action({rawError: true})
  async setUser(user: User) {
    this.context.commit('setUserM', user)
  }
}

And I add it to my store non-dynamically:

const store = new Vuex.Store({
  modules: {
    UserModule
  },
})

But I get an error trying to invoke the action:

index.js?6fc5:234 Uncaught (in promise) 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 (index.js?6fc5:234)
    at getModule (index.js?6fc5:20)
    at Store.eval (index.js?6fc5:297)
    at step (index.js?6fc5:107)
    at Object.eval [as next] (index.js?6fc5:88)
    at eval (index.js?6fc5:81)
    at new Promise (<anonymous>)
    at __awaiter (index.js?6fc5:77)
    at Store.action (index.js?6fc5:289)
    at Array.wrappedActionHandler (vuex.esm.js?2f62:721)

I’m not calling getModule() anywhere; it seems the action itself is calling getModule(). How to fix this?

About this issue

Original URL
State: open
Created 5 years ago
Reactions: 15
Comments: 19 (1 by maintainers)

Most upvoted comments

Had the same problem. I am not using dynamic modules. I fixed my issue by removing the name property in @Module({namespaced: false, name: 'user'})

+87

fgarit-te on Mar 30, 2020

Yeah dynamic is recommended

On Fri 19 Apr, 2019, 6:28 PM GaryO, notifications@github.com wrote:

I ended up just using dynamic registration and the problem went away.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/championswimmer/vuex-module-decorators/issues/116#issuecomment-484888021, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKD7STY3UNPG4XVNXIVBR3PRG6XRANCNFSM4HGVXGNA .

+23

championswimmer on Apr 20, 2019

The solution provided by @fgarit-te also works for me in a Nuxt TS project. If you define store modules as separate files in store directory, then the file name becomes the module name.

How did you make that happen exactly? I get a “ERR_GET_MODULE_NAME” error:

I use exactly the same method as described in the README, with the store accessor

UPDATE: It was nuxt-i18n. Make sure to disable it’s vuex integration, it messes up with vuex-module-decorators!

+13

DimosthenisK on Jul 17, 2020

I ended up just using dynamic registration and the problem went away.

garyo on Apr 19, 2019

I cant make it work in any way, neither do any of the examples work. This is definitely a bug. Cant get Vuex-Module-Decorators work. getModule() does not recognise the store in any way. Uncaught 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)

@championswimmer please take a look on this.

Ed1ks on Jan 24, 2021

Yeah dynamic is recommended … On Fri 19 Apr, 2019, 6:28 PM GaryO, @.***> wrote: I ended up just using dynamic registration and the problem went away. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#116 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAKD7STY3UNPG4XVNXIVBR3PRG6XRANCNFSM4HGVXGNA .

@championswimmer What does this mean? Always?

goldingdamien on Nov 20, 2019

@IceSentry that does not currently work

stephantabor on May 4, 2019

Quickly figured out how to make it work with static module. Just get rid of “name” : @Module({ namespaced: true })

tsiotska on Sep 23, 2021

https://github.com/Armour/vue-typescript-admin-template

This project is an excellent example of how to use vuex-module-decorators

alvaro-canepa on Mar 30, 2020

I believe this would have worked too

const store = new Vuex.Store({
  modules: {
    user: UserModule
  },
})

You need to give the name to the module that is defined in the decorator

IceSentry on Apr 29, 2019

Is there any way to simple use vuex-class to run actions ?

And using less code, like this:

import { Vue, Component } from "vue-property-decorator";
import { Action } from "vuex-class";

@Component
export default class MyComp extends Vue {
  @Action("path/actionName") runActionName!: void;
}

Instead of this:

import { Vue, Component } from "vue-property-decorator";
import { getModule } from "vuex-module-decorators";
import MyStore from "@/store/mystore";

@Component
export default class MyComp extends Vue {
    loadingModule: MyStore | undefined;
    created() {
        this.loadingModule = getModule(MyStore, this.$store);
    }

    runActionName() {
        if (this.loadingModule) {
            this.loadingModule.actionName();
        }
    }
}

Thanks

alvaro-canepa on Dec 30, 2019