duplicate examples

examples/vuex-store-2/README.md

@@ -0,0 +1,83 @@
+# 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.
+
+## 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.
+
+## Create the store folder
+
+Let's create a file `store/index.js`:
+
+```js
+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
+```
+
+> We don't need to install `Vuex` since it's shipped with nuxt.js
+
+## Voilà !
+
+We can now use `this.$store` inside our `.vue` files.
+
+```html
+<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, 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 {
+  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)
+    }
+  }
+}
+```
+
+The context given to `nuxtServerInit` is the same as the `data` of `fetch` method except `context.redirect()` and `context.error()` are omitted.

examples/vuex-store-2/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "nuxt-vuex-store",
+  "dependencies": {
+    "nuxt": "latest"
+  },
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start"
+  }
+}

examples/vuex-store-2/pages/about.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    <p>
+      <button @click="$store.commit('increment')">{{ $store.state.counter }}</button><br>
+      <nuxt-link to="/">Home</nuxt-link>
+    </p>
+  </div>
+</template>

examples/vuex-store-2/pages/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <p>
+      <button @click="increment">{{ counter }}</button>
+      <br>
+      <nuxt-link to="/about">About</nuxt-link>
+      <br>
+      <nuxt-link to="/todos">Todos</nuxt-link>
+    </p>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  // fetch(context) is called by the server-side
+  // and nuxt before instantiating the component
+  fetch ({ store }) {
+    store.commit('increment')
+  },
+  computed: mapState([
+    'counter'
+  ]),
+  methods: {
+    increment () { this.$store.commit('increment') }
+  }
+}
+</script>

examples/vuex-store-2/store/index.js

@@ -0,0 +1,7 @@
+export const state = { counter: 0 }
+
+export const mutations = {
+  increment (state) {
+    state.counter++
+  }
+}

examples/vuex-store/pages/index.vue

@@ -1,11 +1,8 @@
 <template>
   <div>
     <p>
-      <button @click="increment">{{ counter }}</button>
+      <button @click="increment">{{ counter }}</button><br>
-      <br>
       <nuxt-link to="/about">About</nuxt-link>
-      <br>
-      <nuxt-link to="/todos">Todos</nuxt-link>
     </p>
   </div>
 </template>

examples/vuex-store/store/index.js

@@ -1,7 +1,17 @@
-export const state = { counter: 0 }
+import Vue from 'vue'
+import Vuex from 'vuex'
 
-export const mutations = {
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+  state: {
+    counter: 0
+  },
+  mutations: {
     increment (state) {
       state.counter++
     }
-}
+  }
+})
+
+export default store