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)