Nuxt/examples/vuex-store/README.md
Sébastien Chopin cf24b926a1 Version 0.1.6
- Add example /custom-routes/
- Rename example/with-store/ to examples/vuex-store/
- Feature: Add .vue at the end of the component if not specified in
custom routes
- Feature: Add .params and .query in the context
- Feature: Add .name in route if given in custom routes
2016-11-07 21:38:51 +01:00

995 B

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>