vuex-module-decorators: Store not provided in decorator options when using dynamic option

1.2k Views Asked by At

I'm new to Vue and I'm trying to use it as a front-end for an API I've built. I've been following multiple guides and reading through a lot of examples from various sources and nothing I've tried seems to work so I'm unsure where I'm going wrong.

Basically what's happening is when the page loads, I get an error in my browser's console:

Uncaught Error: Store not provided in decorator options when using dynamic option

The stacktrace tells me this is coming from my Tags module. What doesn't make sense is that I have provided the store object. If I try removing the dynamic: true from the module, I get a new error:

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)

If I don't use getModule and just export the class, I get a different error:

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"]

This error tells me I need the module to be dynamic and when setting dynamic: true again, I come back to the first error.

All the relevant code can be found below. Is anyone able to help me with this? I'm completely lost.

// @/main.ts
import { createApp } from 'vue'
import { sync } from 'vuex-router-sync'
import App from './App.vue'
import router from './router'
import store from './store'
import './assets/app.css'

sync(store, router)

createApp(App).use(store).use(router).mount('#app')
// @/store/index.ts
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import tags from '@/store/tags'

export default createStore({
    state: {
        baseUrl: '/api/v1',
    },
    mutations: {},
    actions: {},
    modules: {
        tags,
    },
    plugins: [
        createPersistedState(),
    ],
})
// @/store/tags.ts
import { Action, getModule, Module, Mutation, VuexModule } from 'vuex-module-decorators'
import HTTP from '@/http'
import store from '@/store'

interface Tag {
    foo: string
    bar: string
}

@Module({
    namespaced: true,
    name: 'tags',
    store,
    dynamic: true,
})
class TagsModule extends VuexModule {
    tags: Tag[] = []

    @Action({ commit: 'setTags' })
    async fetchTags(): Promise<Tag[]> {
        return HTTP().get('/tags')
    }

    @Mutation
    setTags(tags: Tag[]): void {
        this.tags = tags
    }
}
export default getModule(TagsModule)
0

There are 0 best solutions below