Vuex Store

    Watch a free lesson about Nuxt.js and Vuex on Vue School

    Nuxt.js will look for the directory, if it exists, it will:

    • Import Vuex,
    • Add the store option to the root Vue instance. Nuxt.js lets you decide between 2 store modes. You can choose the one you prefer:
    • Modules: every .js file inside the store directory is transformed as a (index being the root module).
    • Classic (deprecated): store/index.js returns a method to create a store instance.

    Regardless of the mode, your state value should always be a function to avoid unwanted shared state on the server side.

    Modules mode

    Nuxt.js lets you have a store directory with every file corresponding to a module.

    To get started, export the state as a function, and the mutations and actions as objects in store/index.js:

    Then, you can have a store/todos.js file:

    1. export const state = () => ({
    2.   list: []
    3. })
    5. export const mutations = {
    6.   add (state, text) {
    7.     state.list.push({
    8.       text,
    9.       done: false
    10.     })
    11.   },
    12.   remove (state, { todo }) {
    13.     state.list.splice(state.list.indexOf(todo), 1)
    14.   },
    15.   toggle (state, todo) {
    16.   }
    17. }

    The store will be created as such:

    1. new Vuex.Store({
    2.   state: () => ({
    3.     counter: 0
    4.   }),
    5.   mutations: {
    6.     increment (state) {
    7.       state.counter++
    8.     }
    9.   },
    10.   modules: {
    12.       namespaced: true,
    13.       state: () => ({
    14.         list: []
    15.       }),
    16.       mutations: {
    17.         add (state, { text }) {
    18.           state.list.push({
    19.             text,
    20.             done: false
    21.           })
    22.         },
    23.         remove (state, { todo }) {
    24.           state.list.splice(state.list.indexOf(todo), 1)
    25.         },
    26.           todo.done = !todo.done
    27.         }
    28.       }
    29.     }
    30.   }
    31. })

    And in your pages/todos.vue, using the todos module:

    The module method also works for top-level definitions without implementing a sub-directory in the store directory

    1. export default () => ({
    2.   counter: 0
    3. })

    And the corresponding mutations can be in the file store/mutations.js

    1. export default {
    2.   increment (state) {
    3.     state.counter++
    4.   }
    5. }

    You can optionally break down a module file into separate files: state.js, actions.js, mutations.js and getters.js. If you maintain an file with state, getters and mutations while having a single separate file for actions, that will also still be properly recognized.

    Plugins

    You can add additional plugins to the store (in the modules mode) by putting them into the store/index.js file:

    More information about the plugins: Vuex documentation.

    The fetch method is used to fill the store before rendering the page, it's like the asyncData method except it doesn't set the component data.

    More information about the fetch method: .

    The nuxtServerInit Action

    If the action nuxtServerInit is defined in the store and the mode is universal, Nuxt.js will call it with the context (only from the server-side). It's useful when we have some data on the server we want to give directly to the client-side.

    For example, let's say we have sessions on the server-side and we can access the connected user through req.session.user. To give the authenticated user to our store, we update our store/index.js to the following:

    1. actions: {
    2.   nuxtServerInit ({ commit }, { req }) {
    3.     if (req.session.user) {
    4.       commit('user', req.session.user)
    5.     }
    6.   }
    7. }

    The is given to nuxtServerInit as the 2nd argument, it is the same as asyncData or fetch method.

    If nuxt generate is ran, nuxtServerInit will be executed for every dynamic route generated.

    1. actions: {
    2.   async nuxtServerInit({ dispatch }) {
    3.     await dispatch('core/load')
    4.   }
    5. }

    Strict mode is enabled by default on dev mode and turned off in production mode. To disable strict mode in dev, follow the below example in store/index.js:

    export const strict = false

    Classic mode

    This feature is deprecated and will be removed in Nuxt 3.

    To activate the store with the classic mode, we create the store/index.js file which should export a method that returns a Vuex instance:

    We don't need to install vuex since it's shipped with Nuxt.js.

    We can now use this.$store inside our components:

    1. <template>