Merge commit 'refs/pull/102/head' of gh:championswimmer/vuex-module-d…

…ecorators into pr_102

README.md

@@ -277,6 +277,31 @@ class MyModule extends VuexModule {
 }
 ```
 
+If you would like to preserve the state e.g when loading in the state from [vuex-persist](https://www.npmjs.com/package/vuex-persist)
+
+
+```diff
+...
+
+-- @Module({ dynamic: true, store: store, name: 'mm' })
+++ @Module({ dynamic: true, store: store, name: 'mm', preserveState: true })
+class MyModule extends VuexModule {
+
+...
+```
+
+Or when it doesn't have a initial state and you load the state from the localStorage
+
+
+```diff
+...
+
+-- @Module({ dynamic: true, store: store, name: 'mm' })
+++ @Module({ dynamic: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })
+class MyModule extends VuexModule {
+
+...
+```
 ### Accessing modules with NuxtJS
 
 There are many possible ways to construct your modules. Here is one way for drop-in use with NuxtJS (you simply need to add your modules to `~/utils/store-accessor.ts` and then just import the modules from `~/store`):

package.json

@@ -48,6 +48,7 @@
     "@types/mocha": "^5.2.5",
     "chai": "^4.2.0",
     "mocha": "^5.2.0",
+    "mock-local-storage": "^1.1.8",
     "nyc": "^13.2.0",
     "prettier": "^1.16.4",
     "rimraf": "^2.6.3",
@@ -63,7 +64,8 @@
     "typescript": "^3.5.3",
     "vue": "^2.6.10",
     "vuepress": "^1.0.3",
-    "vuex": "^3.1.1"
+    "vuex": "^3.1.1",
+    "vuex-persist": "^2.0.0"
   },
   "dependencies": {},
   "engines": {

src/module/index.ts

@@ -20,7 +20,8 @@ function registerDynamicModule<S>(module: Mod<S, any>, modOpt: DynamicModuleOpti
 
   modOpt.store.registerModule(
     modOpt.name, // TODO: Handle nested modules too in future
-    module
+    module,
+    { preserveState: modOpt.preserveState || false }
   )
 }
 

src/moduleoptions.ts

@@ -33,10 +33,16 @@ export interface DynamicModuleOptions {
    */
   name: string
 
+  /**
+   * If this is enabled it will preserve the state when loading the module
+   */
+  preserveState?: boolean
+
   /**
    * whether or not the module is namespaced
    */
   namespaced?: boolean
+
   /**
    * Whether to generate a plain state object, or a state factory for the module
    */

test/vuex-persist.ts

@@ -0,0 +1,66 @@
+import { expect } from 'chai'
+import 'mock-local-storage'
+import Vue from 'vue'
+import Vuex from 'vuex'
+import { VuexPersistence } from 'vuex-persist'
+import { Module, Mutation, VuexModule } from '..'
+import { getModule } from '../src'
+
+Vue.use(Vuex)
+
+interface StoreType {
+  mm: MyModule
+}
+
+localStorage.setItem(
+  'vuex',
+  JSON.stringify({
+    mm: {
+      count: 20
+    }
+  })
+)
+
+let vuexLocal = new VuexPersistence({
+  storage: localStorage
+})
+
+let store = new Vuex.Store<StoreType>({
+  plugins: [vuexLocal.plugin]
+})
+
+@Module({ dynamic: true, namespaced: true, store: store, name: 'mm', preserveState: localStorage.getItem('vuex') !== null })
+class MyModule extends VuexModule {
+  count = 0
+
+  @Mutation
+  incrCount(delta: number) {
+    this.count += delta
+  }
+}
+
+@Module({ dynamic: true, namespaced: true, store: store, name: 'msm' })
+class MySecondModule extends VuexModule {
+  count = 0
+
+  @Mutation
+  incrCount(delta: number) {
+    this.count += delta
+  }
+}
+
+describe('state restored by vuex-persist', () => {
+  it('should restore state', function() {
+    const mm = getModule(MyModule)
+    mm.incrCount(5)
+    expect(mm.count).to.equal(25)
+    mm.incrCount(10)
+    expect(mm.count).to.equal(35)
+
+    const msm = getModule(MySecondModule)
+    msm.incrCount(5)
+    expect(msm.count).to.equal(5)
+    msm.incrCount(10)
+    expect(msm.count).to.equal(15)
+  })
+})