How to handle Uncaught Error: [nuxt] store/index.js should export a method that returns a Vuex instance

Question

I have setup a default store in Nuxt in store/index.js as the documentation recommends. When I try to render my app I'm getting the following error:

Uncaught Error: [nuxt] store/index.js should export a method that returns a Vuex instance.

My store/index.js file looks like this:

import Vuex from 'vuex'
import Vue from 'vue'
import myModule from './myModule'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: () => ({

  }),
  mutations: {},
  actions: {},
  modules: {
    myModule: myModule
  }
})
export default store

How do I handle this?

Answer 1

You are exporting the Vuex store as a constant, you should export a default method that returns the Vuex store instance.

Your store/index.js file should look like this:

import Vuex from 'vuex'
import Vue from 'vue'
import myModule from './myModule'

Vue.use(Vuex)

export default () => new Vuex.Store({
  state: () => ({

  }),
  mutations: {},
  actions: {},
  modules: {
    myModule: myModule
  }
})