Manage Vue.js State with Vuex and Nuxt

Share this video with your friends

Most applications require state to be shared across the application. In the case of Nuxt, you'll share state across pages. Nuxt integrates easily with Vuex by simply adding JavaScript files in the store directory. This lesson walks you through setting up a basic store and using it in your template

Dave

~ 7 years ago

It looks like there is now a breaking change in Nuxt. The error below appears for store/index.js

Error: [nuxt] state should be a function in store/index.js

You can resolve this error by using the code below in store/index.js.

import Vuex from 'vuex'

const store = () => {
  return new Vuex.Store({
    state: {
      counter: 0
    },
    mutations: {
      increment (state) {
        state.counter++
      },
      decrement (state) {
        state.counter--
      }
    }
  })
}

export default store

Lyon

~ 6 years ago

Thanks Dave!