无法在Nuxt布局中使用Vuex Store

Question

我正在尝试在layout中使用Vuex Store，但不知道如何使其工作。以下是我正在做的事情：

存储/源.ts

import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
import { store } from '@/store'
import axios from 'axios'
const { sourcesEndpoint } = process.env
interface Source {
id: String
}
@Module({
name: 'sources',
namespaced: true,
stateFactory: true,
dynamic: true,
store,
})
export default class Sources extends VuexModule {
private _sources: Source[] = []
get sources(): Source[] {
return this._sources
}
@Mutation
updateSources(sources: Source[]) {
this._sources = sources
}
@Action({ commit: 'updateSources' })
async fetchSources() {
// eslint-disable-next-line no-console
console.log(`!!! ${sourcesEndpoint} !!!`)
return sourcesEndpoint ? await axios.get(sourcesEndpoint) : []
}
}

存储/索引.ts

import { Store } from 'vuex'
export const store = new Store({})

布局/default.vue

<script>
import { getModule } from 'vuex-module-decorators'
import Sources from '@/store/sources'
export default {
fetch() {
const sourcesModule = getModule(Sources, this.$store)
sourcesModule.fetchSources()
},
fetchOnServer: false,
}
</script>

我得到的错误是：

[vuex] must call Vue.use(Vuex) before creating a store instance.

Answer 1

您需要添加Vue.use(Vuex(，而且，您的模块没有包含在主存储中

import { Store } from 'vuex'
import { Sources } from './sources'
Vue.use(Vuex)
export const store = new Store({
modules: {
Sources 
}
})