examples: improve vuex store example (#5017)

nuxt · Feb 19, 2019 · a9511e5 · a9511e5
1 parent b1753e4
commit a9511e5
Show file tree

Hide file tree

Showing 15 changed files with 39 additions and 115 deletions.
diff --git a/examples/vuex-store-modules/README.md b/examples/vuex-store-modules/README.md
diff --git a/examples/vuex-store-modules/package.json b/examples/vuex-store-modules/package.json
diff --git a/examples/vuex-store-modules/pages/about.vue b/examples/vuex-store-modules/pages/about.vue
diff --git a/examples/vuex-store-modules/pages/index.vue b/examples/vuex-store-modules/pages/index.vue
diff --git a/examples/vuex-store-modules/store/index.js b/examples/vuex-store-modules/store/index.js
diff --git a/examples/vuex-store/README.md b/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
diff --git a/examples/vuex-store/pages/index.vue b/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')
  },

diff --git a/examples/vuex-store-modules/pages/todos.vue → examples/vuex-store/pages/todos.vue b/examples/vuex-store-modules/pages/todos.vue → examples/vuex-store/pages/todos.vue
diff --git a/...ples/vuex-store-modules/pages/website.vue → examples/vuex-store/pages/website.vue b/...ples/vuex-store-modules/pages/website.vue → examples/vuex-store/pages/website.vue
diff --git a/...ples/vuex-store-modules/store/articles.js → examples/vuex-store/store/articles.js b/...ples/vuex-store-modules/store/articles.js → examples/vuex-store/store/articles.js
diff --git a/...-store-modules/store/articles/comments.js → ...les/vuex-store/store/articles/comments.js b/...-store-modules/store/articles/comments.js → ...les/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

diff --git a/examples/vuex-store/store/articles/comments/mutations.js b/examples/vuex-store/store/articles/comments/mutations.js
@@ -0,0 +1,5 @@
+export default {
+ add(state, title) {
+ state.list.push(title)
+ }
+}
diff --git a/examples/vuex-store/store/todos/getters.js b/examples/vuex-store/store/todos/getters.js
@@ -0,0 +1,5 @@
+export default {
+ todos(state) {
+ return state.list
+ }
+}
diff --git a/examples/vuex-store-modules/store/todos.js → examples/vuex-store/store/todos/mutations.js b/examples/vuex-store-modules/store/todos.js → 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
- }
-}
diff --git a/examples/vuex-store/store/todos/state.js b/examples/vuex-store/store/todos/state.js
@@ -0,0 +1,3 @@
+export default () => ({
+ list: []
+})