Nuxt.js with Vuex

Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core.

Activate the store option

First, we need to tell nuxt.js to activate the store, for this, we add a nuxt.config.js file:

module.exports = {
  store: true
}

Create the store folder

When the store option is activated, nuxt will import it via require('./store')

After creating the store/ folder, we can create our store/index.js file:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

export default store

You don't need to install vuex since it's shipped with nuxt.js

Voilà !

You're ready to use this.$store inside your .vue files :)

<template>
  <button @click="$store.commit('increment')">{{ $store.state.counter }}</button>
</template>

fetch (context)

Used to fill the store before rendering the page

The fetch method, if set, is called every time before loading the component (only if attached to a route). It can be called from the server-side or before navigating to the corresponding route.

The fetch method receives the context as the first argument, you can use it to fetch some data and fill the store. To make the fetch method asynchronous, return a Promise, nuxt.js will wait for the promise to be resolved before rendering the Component.

For example:

export default {
  fetch ({ store, params }) {
    return axios.get('http://my-url')
    .then((res) => {
      store.commit('setUser', res.data)
    })
  }
}

Context

To see the list of available keys in context, take a look at this documentation.

1.8 KiB Raw Blame History