diff --git a/examples/vuex-store-2/README.md b/examples/vuex-store-2/README.md index 4bf9cbec9e..8146795f6c 100644 --- a/examples/vuex-store-2/README.md +++ b/examples/vuex-store-2/README.md @@ -1,33 +1,51 @@ -# Nuxt.js with Vuex +# Nuxt.js with Vuex 2 > Using a store to manage the state is important to every big application, that's why nuxt.js implement Vuex in its core. +> Alternative way of creating a store modularly. + ## Activating the store -Nuxt.js will try to `require('./store/index.js')`, if exists, it will import `Vuex`, add it to the vendors and add the `store` option to the root `Vue` instance. +Nuxt.js will look for the `./store/` directory, if it exists, its will import and use Vuex. If there is no `./store/index.js` file that returns a store, Nuxt.js will go through all files of the `./store/` directory and create a store with a module for each file (`./store/index.js` being "root" module). ## Create the store folder Let's create a file `store/index.js`: ```js -import Vue from 'vue' -import Vuex from 'vuex' +export const state = { counter: 0 } -Vue.use(Vuex) - -const store = new Vuex.Store({ - state: { - counter: 0 - }, - mutations: { - increment (state) { - state.counter++ - } +export const mutations = { + increment (state) { + state.counter++ } -}) +} +``` -export default store +and +`store/todos.js`: + +```js +export const state = { + list: [] +} + +export const mutations = { + add (state, { text }) { + state.list.push({ + text, + done: false + }) + }, + + delete (state, { todo }) { + state.list.splice(state.list.indexOf(todo), 1) + }, + + toggle (state, { todo }) { + todo.done = !todo.done + } +} ``` > We don't need to install `Vuex` since it's shipped with nuxt.js @@ -42,42 +60,35 @@ We can now use `this.$store` inside our `.vue` files. ``` -## 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, we 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: +The store will be as such: ```js -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](https://github.com/nuxt/nuxt.js/tree/master/examples/async-data#context). - -## Action `nuxtServerInit` - -If we define the action `nuxtServerInit` in our store, Nuxt.js will call it with the context. It can be useful when having some data on the server we want to give directly to the client-side, for example, the authenticated user: -```js -// store/index.js -actions: { - nuxtServerInit ({ commit }, { req }) { - if (req.authUser) { - commit('user', req.authUser) +new Vuex.Store({ + state: { counter: 0 }, + mutations: { + increment (state) { + state.counter++ + } + }, + modules: { + todos: { + state: { + list: [] + }, + mutations: { + add (state, { text }) { + state.list.push({ + text, + done: false + }) + }, + delete (state, { todo }) { + state.list.splice(state.list.indexOf(todo), 1) + }, + toggle (state, { todo }) { + todo.done = !todo.done + } + } } } -} +}) ``` - -The context given to `nuxtServerInit` is the same as the `data` of `fetch` method except `context.redirect()` and `context.error()` are omitted.