Merge pull request #1 from ktsn/register-parent

Declare parent module of local modules automatically

README.md

@@ -29,13 +29,8 @@ Vue.use(VuexLocal, {
   parentModulePath: ['locals']
 })
 
-export default new Vuex.Store({
-  modules: {
-    // make sure to define the module that is
-    // specified by `parentModulePath` option
-    locals: {}
-  }
-})
+// generate `locals` module automatically
+export default new Vuex.Store({})
 ```
 
 Then, you can define a local module on each component. The component option will have `local` property that is a function returning a local module object.

src/mixin.ts

@@ -1,5 +1,6 @@
 import * as _Vue from 'vue'
 import { ComponentOptions } from 'vue'
+import { Store } from 'vuex'
 import { PluginOptions, VuePrivate } from './declarations.d'
 
 import { registerLocalModule, unregisterLocalModule } from './register'
@@ -21,6 +22,8 @@ export function applyMixin (
 
       assert(this.$store, 'store must be injected')
 
+      ensureParent(this.$store, parentModulePath)
+
       const localModule = this.$options.local.call(this)
 
       let name = localModule.name
@@ -43,3 +46,16 @@ export function applyMixin (
     }
   } as ComponentOptions<_Vue & VuePrivate>)
 }
+
+function ensureParent (store: Store<any>, parentPath: string[]): void {
+  let state = store.state
+  const currentPath: string[] = []
+  parentPath.forEach(key => {
+    state = state[key]
+    currentPath.push(key)
+
+    if (typeof state === 'undefined') {
+      store.registerModule(currentPath, {})
+    }
+  })
+}

test/mixin.ts

@@ -6,21 +6,54 @@ import { applyMixin } from '../src/mixin'
 Vue.use(Vuex)
 
 describe('Global Mixin', () => {
-  let store: Vuex.Store<any>
-
   applyMixin(Vue, {
     parentModulePath: ['local']
   })
 
-  beforeEach(() => {
-    store = new Vuex.Store({
+  it('auto declare parent module', () => {
+    const store: Vuex.Store<any> = new Vuex.Store({})
+
+    new Vue({
+      store,
+      local: () => ({
+        name: 'test',
+        state: { value: 0 }
+      })
+    })
+
+    assert(typeof store.state.local === 'object')
+  })
+
+  it('does not touch existing parent module', () => {
+    const store: Vuex.Store<any> = new Vuex.Store({
       modules: {
-        local: {}
+        local: {
+          modules: {
+            foo: {
+              state: {
+                value: 'foo'
+              }
+            }
+          }
+        }
       }
     })
+
+    new Vue({
+      store,
+      local: () => ({
+        name: 'test',
+        state: { value: 'test' }
+      })
+    })
+
+    assert(store.state.local.foo.value === 'foo')
+    assert(store.state.local.test.value === 'test')
   })
 
   it('binds local module', () => {
+    const store: Vuex.Store<any> = new Vuex.Store({})
+
     const vm: any = new Vue({
       store,
       local: () => ({
@@ -55,6 +88,8 @@ describe('Global Mixin', () => {
   })
 
   it('remove local module when component is destroyed', () => {
+    const store: Vuex.Store<any> = new Vuex.Store({})
+
     const vm: any = new Vue({
       store,
       local: () => ({