Блог

Я пытаюсь использовать хранилище Vuex в моем layout , но не могу понять, как заставить его работать. Вот что я делаю:

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.
 

Вам необходимо добавить Vue.use(Vuex), кроме того, вы не включаете свой модуль в основное хранилище

 import { Store } from 'vuex'
import { Sources } from './sources'

Vue.use(Vuex)
export const store = new Store({
modules: {
    Sources 
  }
})