examples: improve vuex store example (#5017)

examples/vuex-store-modules/README.md

@@ -1,7 +0,0 @@
-# Nuxt with [Vuex](https://vuex.vuejs.org/) and store modules
-
-> Vuex is a state management pattern + library for Vue.js applications. 
-
-Read on Vuex modules [here](https://vuex.vuejs.org/guide/modules.html)
-
-https://nuxtjs.org/guide/vuex-store#modules-files

examples/vuex-store-modules/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "example-vuex-store-modules",
-  "dependencies": {
-    "nuxt": "latest"
-  },
-  "scripts": {
-    "dev": "nuxt",
-    "build": "nuxt build",
-    "start": "nuxt start",
-    "post-update": "yarn upgrade --latest"
-  }
-}

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

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

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

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

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

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

examples/vuex-store/README.md

@@ -1,7 +1,7 @@
-# Nuxt with [Vuex](https://vuex.vuejs.org/)
+# Nuxt with [Vuex](https://vuex.vuejs.org/) and store modules
 
+> Vuex is a state management pattern + library for Vue.js applications. 
 
->Vuex is a state management pattern + library for Vue.js applications.
+Read on Vuex modules [here](https://vuex.vuejs.org/guide/modules.html)
 
-
-https://nuxtjs.org/examples/vuex-store
+https://nuxtjs.org/guide/vuex-store#modules-files

examples/vuex-store/pages/index.vue

@@ -1,13 +1,25 @@
 <template>
   <div>
-    <p>
-      <button @click="increment">
-        {{ counter }}
-      </button><br>
-      <NuxtLink to="/about">
-        About
-      </NuxtLink>
-    </p>
+    <h3>Index Module</h3>
+    <button @click="increment">
+      {{ counter }}
+    </button>
+    <br>
+    <NuxtLink to="/about">
+      About
+    </NuxtLink>
+    <br>
+    <br>
+    <h3>Todo Module</h3>
+    <NuxtLink to="/todos">
+      Todos
+    </NuxtLink>
+    <br>
+    <br>
+    <h3>Nested Modules</h3>
+    <NuxtLink to="/website">
+      Website
+    </NuxtLink>
   </div>
 </template>
 
@@ -19,7 +31,7 @@ export default {
     'counter'
   ]),
   // fetch(context) is called by the server-side
-  // and nuxt before instantiating the component
+  // and before instantiating the component
   fetch({ store }) {
     store.commit('increment')
   },

examples/vuex-store/store/articles/comments.js

@@ -6,12 +6,6 @@ export const state = () => ({
   ]
 })
 
-export const mutations = {
-  add(state, title) {
-    state.list.push(title)
-  }
-}
-
 export const getters = {
   get(state) {
     return state.list

examples/vuex-store/store/articles/comments/mutations.js

@@ -0,0 +1,5 @@
+export default {
+  add(state, title) {
+    state.list.push(title)
+  }
+}

examples/vuex-store/store/todos/getters.js

@@ -0,0 +1,5 @@
+export default {
+  todos(state) {
+    return state.list
+  }
+}

examples/vuex-store/store/todos/mutations.js

@@ -1,8 +1,4 @@
-export const state = () => ({
-  list: []
-})
-
-export const mutations = {
+export default {
   add(state, { text }) {
     state.list.push({
       text,
@@ -14,9 +10,3 @@ export const mutations = {
     todo.done = !todo.done
   }
 }
-
-export const getters = {
-  todos(state) {
-    return state.list
-  }
-}

examples/vuex-store/store/todos/state.js

@@ -0,0 +1,3 @@
+export default () => ({
+  list: []
+})