Cannot use $store.dispatch on a named static module

[ArielPrevu3D]

Hi,

I need my static module to have a name in order to be able to use getModule on it. However, doing so prevents my legacy code from using $store.dispatch because getModule is used internally without a store as a second argument. The store cannot be passed to the Module decorator of the module since it is static.

[fen89]

@ArielPrevu3D Can you please provide a code example? Because I am not exactly sure what you want to achieve here.

[ArielPrevu3D]

This is my static Vuex store module.

// test.store.ts
import { Action, Module, VuexModule } from "vuex-module-decorators";

@Module({name: 'testStore', namespaced: false})
class TestStore extends VuexModule {
    testStateField: boolean = true

    @Action
    dood() {
        console.log("DOOD")
    }
}

export default TestStore

// store.ts
import Vue from "vue";
import Vuex from "vuex";
import TestStore from "./stores/test.store";

Vue.use(Vuex);

const store = new Vuex.Store({
    modules: {
        testStore: TestStore
    }
});

export default store;

// In some javascript component....
this.$store.dispatch("dood")

Then it gives me this error:

index.js?722b:575 Uncaught (in promise) 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 dood
    at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:583:334)
    at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:248:17)
    at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:179:14)
    at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:151:67)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:130:10)
    at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:534:14)
    at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:860:23)
    at Store.dispatch (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:525:15)
    at Store.boundDispatch [as dispatch] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:415: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:462:19)
    at getModule (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:74:21)
    at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:546:100)
    at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:248:17)
    at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:179:14)
    at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:151:67)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:130:10)
    at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:534:14)
    at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:860:23)
    at Store.eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:583:38)
    at step (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:248:17)
    at Object.eval [as next] (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:179:14)
    at eval (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:151:67)
    at new Promise (<anonymous>)
    at __awaiter (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:130:10)
    at Store.action (webpack-internal:///./node_modules/vuex-module-decorators/dist/esm/index.js:534:14)
    at Array.wrappedActionHandler (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:860:23)
    at Store.dispatch (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:525:15)
    at Store.boundDispatch [as dispatch] (webpack-internal:///./node_modules/vuex/dist/vuex.esm.js:415:21)

I gave a name to the static store so I could use both getModule(TestStore, store) and this.$store.dispatch() syntaxes. When I use the dispatch syntax, I get ERR_STORE_NOT_PROVIDED even though I did not use getModule. This is because internally, vuex-module-decorators assumes my module is dynamic because it has a name.

I ended up making the store dynamic to get this to work. There isn't really a disadvantage in making the store dynamic, so I guess it's a proper workaround.

[Murali-codes]

@ArielPrevu3D , Can i know the reason why you had to give a name and namespace as "false"
Vuex-module-decorators checks on name but not on namespace

I will try to raise PR with a change to check based on name and namespace , in the mean time , if possible remove name and check .