newStore and Submodule

src/action.ts

@@ -1,6 +1,5 @@
 import { Action as Act, ActionContext, Module as Mod, Payload } from 'vuex'
-import { getModule, VuexModule } from './vuexmodule'
-import { addPropertiesToObject, getModuleName } from './helpers'
+import { addPropertiesToObject } from './helpers'
 import { config } from './config'
 
 /**
@@ -19,45 +18,43 @@ function actionDecoratorFactory<T>(params?: ActionDecoratorParams): MethodDecora
       module.actions = Object.assign({}, module.actions)
     }
     const actionFunction: Function = descriptor.value
+    const staticKey = '$statics/' + String(key)
     const action: Act<typeof target, any> = async function(
       context: ActionContext<typeof target, any>,
       payload: Payload
     ) {
-      try {
-        let actionPayload = null
+      let actionPayload
 
-        if ((module as any)._genStatic) {
-          const moduleName = getModuleName(module)
-          const moduleAccessor = context.rootGetters[moduleName]
-            ? context.rootGetters[moduleName]
-            : getModule(module as typeof VuexModule)
-          moduleAccessor.context = context
-          actionPayload = await actionFunction.call(moduleAccessor, payload)
-        } else {
-          const thisObj = { context }
-          addPropertiesToObject(thisObj, context.state)
-          addPropertiesToObject(thisObj, context.getters)
+      if (context.getters[staticKey]) {
+        const moduleAccessor = context.getters[staticKey]
+        moduleAccessor.context = context
+        actionPayload = await actionFunction.call(moduleAccessor, payload)
+      } else {
+        const thisObj = { context }
+        addPropertiesToObject(thisObj, context.state)
+        addPropertiesToObject(thisObj, context.getters)
+        try {
           actionPayload = await actionFunction.call(thisObj, payload)
+        } catch (e) {
+          throw rawError
+            ? e
+            : new Error(
+                'ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access ' +
+                  'this.someMutation() or this.someGetter inside an @Action? \n' +
+                  'That works only in dynamic modules. \n' +
+                  'If not dynamic use this.context.commit("mutationName", payload) ' +
+                  'and this.context.getters["getterName"]' +
+                  '\n' +
+                  new Error(`Could not perform action ${key.toString()}`).stack +
+                  '\n' +
+                  e.stack
+              )
         }
-        if (commit) {
-          context.commit(commit, actionPayload)
-        }
-        return actionPayload
-      } catch (e) {
-        throw rawError
-          ? e
-          : new Error(
-              'ERR_ACTION_ACCESS_UNDEFINED: Are you trying to access ' +
-                'this.someMutation() or this.someGetter inside an @Action? \n' +
-                'That works only in dynamic modules. \n' +
-                'If not dynamic use this.context.commit("mutationName", payload) ' +
-                'and this.context.getters["getterName"]' +
-                '\n' +
-                new Error(`Could not perform action ${key.toString()}`).stack +
-                '\n' +
-                e.stack
-            )
       }
+      if (commit) {
+        context.commit(commit, actionPayload)
+      }
+      return actionPayload
     }
     module.actions![key as string] = root ? { root, handler: action } : action
   }

src/helpers.ts

@@ -1,3 +1,7 @@
+import { VueConstructor } from 'vue'
+import Vuex from 'vuex'
+import { ModuleMap } from './vuexmodule'
+
 /**
  * Takes the properties on object from parameter source and adds them to the object
  * parameter target
@@ -12,15 +16,56 @@
   }
 }
 
+/**
+ * Returns a path based name of the module to be used for store access
+ * @param path
+ */
+export function getStaticName(path: string[]): string {
+  if (path.length === 0) {
+    return '$statics'
+  }
+  return '$statics.' + path.join('.')
+}
+
 /**
  * Returns a namespaced name of the module to be used as a store getter
  * @param module
+ * @param path
+ * @param namespaced
  */
-export function getModuleName(module: any): string {
-  if (!module._vmdModuleName) {
-    throw new Error(`ERR_GET_MODULE_NAME : Could not get module accessor.
-      Make sure your module has name, we can't make accessors for unnamed modules
-      i.e. @Module({ name: 'something' })`)
+export function getModuleNamespace(module: ModuleMap, path: string[], namespaced: boolean): string {
+  let namespace = ''
+  if (path.length === 0) {
+    return namespace
+  }
+  for (const key of path.slice(0, -1)) {
+    if (!module.modules || !module.modules[key]) {
+      throw new Error(`ERR_DYNAMIC_MODULE_NOT_EXISTS : Could not create module.
+        Make sure your path to your dynamic submodule exists
+        i.e. @Module({ name: "path.to.exits.name", store, dynamic: true })`)
+    }
+    module = module.modules[key]
+    if (module.namespaced) {
+      namespace = namespace + key + '/'
+    }
+  }
+  if (namespaced) {
+    return namespace + path[path.length - 1]
+  }
+  return namespace.slice(0, -1)
+}
+
+export function getNamespacedKey(namespace: string | null | undefined, key: string) {
+  return namespace ? `${namespace}/${key}` : key
+}
+
+export function install<R>(Vue: VueConstructor) {
+  Vue.use(Vuex)
+  Vue.mixin({ beforeCreate: storeInit })
+
+  function storeInit(this: Vue) {
+    Object.defineProperty(this, '$stock', {
+      get: (): R => this.$store.getters.$statics
+    })
   }
-  return `vuexModuleDecorators/${module._vmdModuleName}`
 }

src/index.ts

@@ -1,6 +1,14 @@
-export { VuexModule, getModule } from './vuexmodule'
+export { VuexModule, VuexStore, Context } from './vuexmodule'
 export { Module } from './module'
+export { Submodule } from './submodule'
 export { Action } from './action'
 export { Mutation } from './mutation'
 export { MutationAction } from './mutationaction'
 export { config } from './config'
+import { VuexModule, VuexStore } from './vuexmodule'
+import { install } from './helpers'
+export default {
+  Module: VuexModule,
+  Store: VuexStore,
+  install
+}

src/module/index.ts

@@ -1,13 +1,9 @@
-import { GetterTree, Module as Mod, Store } from 'vuex'
+import { GetterTree, Module as Mod } from 'vuex'
 import { DynamicModuleOptions, ModuleOptions } from '../moduleoptions'
 import { stateFactory as sf } from './stateFactory'
-import { addPropertiesToObject } from '../helpers'
-import {
-  staticActionGenerators,
-  staticGetterGenerator,
-  staticMutationGenerator,
-  staticStateGenerator
-} from './staticGenerators'
+import { addPropertiesToObject, getModuleNamespace } from '../helpers'
+import { staticModuleGenerator } from './staticGenerators'
+import { installStatics, VuexStore } from '../vuexmodule'
 
 function registerDynamicModule<S>(module: Mod<S, any>, modOpt: DynamicModuleOptions) {
   if (!modOpt.name) {
@@ -18,82 +14,80 @@ function registerDynamicModule<S>(module: Mod<S, any>, modOpt: DynamicModuleOpti
     throw new Error('Store not provided in decorator options when using dynamic option')
   }
 
-  modOpt.store.registerModule(
-    modOpt.name, // TODO: Handle nested modules too in future
-    module,
-    { preserveState: modOpt.preserveState || false }
-  )
+  const oldStatics = modOpt.store.getters.$statics
+  const moduleMap = (modOpt.store as VuexStore<S>)._vmdModuleMap
+  const path = modOpt.name.split('.')
+  const namespace = moduleMap ? getModuleNamespace(moduleMap, path, !!modOpt.namespaced) : undefined
+  modOpt.store.registerModule(path, module, { preserveState: modOpt.preserveState || false })
+  if (moduleMap && oldStatics) {
+    installStatics(modOpt.store.getters, moduleMap, oldStatics)
+    const name = path[path.length - 1]
+    const recursive = true
+    const statics = staticModuleGenerator(module, modOpt.store, path, namespace, recursive)
+    const parentStatics = path.slice(0, -1).reduce((s, key) => s[key], oldStatics)
+    parentStatics[name] = statics
+    const parentModuleMap = path.slice(0, -1).reduce((s, key) => s.modules![key], moduleMap)
+    parentModuleMap.modules![name] = installStatics(
+      modOpt.store.getters,
+      module,
+      statics,
+      path,
+      namespace,
+      recursive
+    )
+  }
 }
 
 function moduleDecoratorFactory<S>(moduleOptions: ModuleOptions) {
   return function<TFunction extends Function>(constructor: TFunction): TFunction | void {
     const module: Function & Mod<S, any> = constructor
     const stateFactory = () => sf(module)
+    Object.defineProperty(constructor, 'factory', {
+      get() {
+        return stateFactory
+      }
+    })
 
+    moduleOptions.stateFactory = moduleOptions.stateFactory !== false
     if (!module.state) {
-      module.state = moduleOptions && moduleOptions.stateFactory ? stateFactory : stateFactory()
+      module.state = moduleOptions.stateFactory ? stateFactory : stateFactory()
     }
     if (!module.getters) {
       module.getters = {} as GetterTree<S, any>
     }
-    if (!module.namespaced) {
-      module.namespaced = moduleOptions && moduleOptions.namespaced
+    if (module.namespaced === undefined) {
+      module.namespaced = moduleOptions.namespaced !== false
     }
+    moduleOptions.namespaced = module.namespaced
     Object.getOwnPropertyNames(module.prototype).forEach((funcName: string) => {
       const descriptor = Object.getOwnPropertyDescriptor(
         module.prototype,
         funcName
       ) as PropertyDescriptor
       if (descriptor.get && module.getters) {
+        const staticKey = '$statics/' + funcName
         module.getters[funcName] = function(
           state: S,
-          getters: GetterTree<S, any>,
+          getters: any,
           rootState: any,
-          rootGetters: GetterTree<any, any>
+          rootGetters: any
         ) {
-          const thisObj = { context: { state, getters, rootState, rootGetters } }
-          addPropertiesToObject(thisObj, state)
-          addPropertiesToObject(thisObj, getters)
-          const got = (descriptor.get as Function).call(thisObj)
+          const context = { state, getters, rootState, rootGetters }
+          let moduleAccessor
+          if (getters[staticKey]) {
+            moduleAccessor = getters[staticKey]
+            moduleAccessor.context = context
+          } else {
+            moduleAccessor = { context }
+            addPropertiesToObject(moduleAccessor, state)
+            addPropertiesToObject(moduleAccessor, getters)
+          }
+          const got = (descriptor.get as Function).call(moduleAccessor)
           return got
         }
       }
     })
     const modOpt = moduleOptions as DynamicModuleOptions
-    if (modOpt.name) {
-      Object.defineProperty(constructor, '_genStatic', {
-        value: (store?: Store<any>) => {
-          let statics = { store: store || modOpt.store }
-          if (!statics.store) {
-            throw new Error(`ERR_STORE_NOT_PROVIDED: To use getModule(), either the module
-            should be decorated with store in decorator, i.e. @Module({store: store}) or
-            store should be passed when calling getModule(), i.e. getModule(MyModule, this.$store)`)
-          }
-          // ===========  For statics ==============
-          // ------ state -------
-          staticStateGenerator(module, modOpt, statics)
-
-          // ------- getters -------
-          if (module.getters) {
-            staticGetterGenerator(module, modOpt, statics)
-          }
-
-          // -------- mutations --------
-          if (module.mutations) {
-            staticMutationGenerator(module, modOpt, statics)
-          }
-          // -------- actions ---------
-          if (module.actions) {
-            staticActionGenerators(module, modOpt, statics)
-          }
-          return statics
-        }
-      })
-
-      Object.defineProperty(constructor, '_vmdModuleName', {
-        value: modOpt.name
-      })
-    }
 
     if (modOpt.dynamic) {
       registerDynamicModule(module, modOpt)

src/module/stateFactory.ts

@@ -1,21 +1,35 @@
 import { Module as Mod } from 'vuex'
 
-const reservedKeys = ['actions', 'getters', 'mutations', 'modules', 'state', 'namespaced', 'commit']
+const reservedKeys = [
+  'namespaced',
+  'state',
+  'getters',
+  'mutations',
+  'actions',
+  'modules',
+  'commit',
+  'dispatch',
+  'factory',
+  'context',
+  'namespace',
+  'path'
+]
 export function stateFactory<S>(module: Function & Mod<S, any>) {
-  const state = new module.prototype.constructor({})
+  const state = new module.prototype.constructor()
+  const modules = module.modules || {}
   const s = {} as S
   Object.keys(state).forEach((key: string) => {
     if (reservedKeys.indexOf(key) !== -1) {
       if (typeof state[key] !== 'undefined') {
         throw new Error(
           `ERR_RESERVED_STATE_KEY_USED: You cannot use the following
-        ['actions', 'getters', 'mutations', 'modules', 'state', 'namespaced', 'commit']
+        [${reservedKeys.join(', ')}]
         as fields in your module. These are reserved as they have special purpose in Vuex`
         )
       }
       return
     }
-    if (state.hasOwnProperty(key)) {
+    if (state.hasOwnProperty(key) && !modules.hasOwnProperty(key)) {
       if (typeof state[key] !== 'function') {
         ;(s as any)[key] = state[key]
       }