Merge pull request #447 from rhwilrForks/master

Allow nested vuex modules

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

@@ -1,11 +1,18 @@
 <template>
   <div>
     <p>
+      <h3>Index Module</h3>
       <button @click="increment">{{ counter }}</button>
       <br>
       <nuxt-link to="/about">About</nuxt-link>
       <br>
+      <br>
+      <h3>Todo Module</h3>
       <nuxt-link to="/todos">Todos</nuxt-link>
+      <br>
+      <br>
+      <h3>Nested Modules</h3>
+      <nuxt-link to="/website">Website</nuxt-link>
     </p>
   </div>
 </template>

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

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <h2>Articles</h2>
+    <ul>
+      <li v-for="article in articles">
+        <span>{{article}}</span>
+      </li>
+    </ul>
+    <h2>Comments <small>(nested under articles)</small></h2>
+    <ul>
+      <li v-for="comment in comments">
+        <span>{{comment}}</span>
+      </li>
+    </ul>
+    <nuxt-link to="/">Home</nuxt-link>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+
+export default {
+  computed: mapGetters({
+    articles: 'articles/get',
+    comments: 'articles/comments/get'
+  }),
+  methods: {
+  }
+}
+</script>
+
+<style>
+</style>

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

@@ -0,0 +1,19 @@
+export const state = {
+  list: [
+    'Lorem ipsum',
+    'dolor sit amet',
+    'consetetur sadipscing elitr'
+  ]
+}
+
+export const mutations = {
+  add (state, title) {
+    state.list.push(title)
+  }
+}
+
+export const getters = {
+  get (state) {
+    return state.list
+  }
+}

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

@@ -0,0 +1,19 @@
+export const state = {
+  list: [
+    'Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+    'Lorem ipsum dolor sit amet, consetetur sadipscing elit.',
+    'Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'
+  ]
+}
+
+export const mutations = {
+  add (state, title) {
+    state.list.push(title)
+  }
+}
+
+export const getters = {
+  get (state) {
+    return state.list
+  }
+}

lib/app/store.js

@@ -2,7 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)
 
-let files = require.context('~/store', false, /^\.\/.*\.js$/)
+let files = require.context('~/store', true, /^\.\/.*\.js$/)
 let filenames = files.keys()
 
 function getModule (filename) {
@@ -12,6 +12,18 @@ function getModule (filename) {
     : file
 }
 
+function getModuleNamespace (storeData, namePath) {
+  if (namePath.length == 1) return storeData.modules
+
+  let namespace = namePath.shift()
+  
+  storeData.modules[namespace] = storeData.modules[namespace] || {}
+  storeData.modules[namespace].namespaced = true
+  storeData.modules[namespace].modules = storeData.modules[namespace].modules || {}
+
+  return getModuleNamespace(storeData.modules[namespace], namePath)
+}
+
 let store
 let storeData = {}
 
@@ -31,8 +43,13 @@ if (store == null) {
   for (let filename of filenames) {
     let name = filename.replace(/^\.\//, '').replace(/\.js$/, '')
     if (name === 'index') continue
-    storeData.modules[name] = getModule(filename)
-    storeData.modules[name].namespaced = true
+
+    let namePath = name.split(/\//)
+    let module = getModuleNamespace(storeData, namePath)
+
+    name = namePath.pop()
+    module[name] = getModule(filename)
+    module[name].namespaced = true
   }
   store = new Vuex.Store(storeData)
 }