无法在Nuxt布局中使用Vuex商店

Question

我正试图在我的layout中使用Vuex，但是我想不出如何使它工作。以下是我正在做的事情：

store/sources.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) : []
  }
}

store/index.ts

import { Store } from 'vuex'

export const store = new Store({})

layouts/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 
  }
})