documenting store generation

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'
+export const state = { counter: 0 }
-import Vuex from 'vuex'
 
-Vue.use(Vuex)
+export const mutations = {
-
+  increment (state) {
-const store = new Vuex.Store({
+    state.counter++
-  state: {
-    counter: 0
-  },
-  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.
 </template>
 ```
 
-## fetch (context)
+The store will be as such:
-
-> 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:
 ```js
-export default {
+new Vuex.Store({
-  fetch ({ store, params }) {
+  state: { counter: 0 },
-    return axios.get('http://my-url')
+  mutations: {
-    .then((res) => {
+    increment (state) {
-      store.commit('setUser', res.data)
+      state.counter++
-    })
+    }
-  }
+  },
-}
+  modules: {
-```
+    todos: {
-
+      state: {
-## Context
+        list: []
-
+      },
-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).
+      mutations: {
-
+        add (state, { text }) {
-## Action `nuxtServerInit`
+          state.list.push({
-
+            text,
-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:
+            done: false
-```js
+          })
-// store/index.js
+        },
-actions: {
+        delete (state, { todo }) {
-  nuxtServerInit ({ commit }, { req }) {
+          state.list.splice(state.list.indexOf(todo), 1)
-    if (req.authUser) {
+        },
-      commit('user', req.authUser)
+        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.