Add support for preserveState options

Author: filips123

docs/guide/modules.md

@@ -321,6 +321,10 @@ It may be likely that you want to preserve the previous state when registering a
 
 When you set `preserveState: true`, the module is registered, actions, mutations and getters are added to the store, but the state is not. It's assumed that your store state already contains state for that module and you don't want to overwrite it.
 
+If you want state to be preserved only if the existing state actually exists, you can set the `preserveStateType` to `existing`. In this case, the state from the module will be registered if the existing state does not exist.
+
+You can also set `preserveStateType` to `mergeReplaceArrays` or `mergeConcatArrays`, to merge the existing state with the module state using `deepmerge`, either by replacing arrays or combining them. Individual keys from the existing state will overwrite the default ones from the module.
+
 ## Module Reuse
 
 Sometimes we may need to create multiple instances of a module, for example:

package.json

@@ -91,5 +91,8 @@
     "webpack": "^4.43.0",
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.25.0"
+  },
+  "dependencies": {
+    "deepmerge": "^4.2.2"
   }
 }

src/store.js

@@ -2,6 +2,7 @@ import applyMixin from './mixin'
 import devtoolPlugin from './plugins/devtool'
 import ModuleCollection from './module/module-collection'
 import { forEachValue, isObject, isPromise, assert, partial } from './util'
+import deepmerge from 'deepmerge'
 
 let Vue // bind on install
 
@@ -209,7 +210,7 @@ export class Store {
     }
 
     this._modules.register(path, rawModule)
-    installModule(this, this.state, path, this._modules.get(path), options.preserveState)
+    installModule(this, this.state, path, this._modules.get(path), options.preserveState, options.preserveStateType)
     // reset store to update getters...
     resetStoreVM(this, this.state)
   }
@@ -328,7 +329,7 @@ function resetStoreVM (store, state, hot) {
   }
 }
 
-function installModule (store, rootState, path, module, hot) {
+function installModule (store, rootState, path, module, preserveState, preserveStateType = 'always') {
   const isRoot = !path.length
   const namespace = store._modules.getNamespace(path)
 
@@ -341,9 +342,15 @@ function installModule (store, rootState, path, module, hot) {
   }
 
   // set state
-  if (!isRoot && !hot) {
-    const parentState = getNestedState(rootState, path.slice(0, -1))
-    const moduleName = path[path.length - 1]
+  const parentState = getNestedState(rootState, path.slice(0, -1))
+  const moduleName = path[path.length - 1]
+  const moduleStateExists = moduleName && moduleName in parentState
+  if (!isRoot && (
+    !preserveState ||
+    (preserveStateType === 'existing' && !moduleStateExists) ||
+    (preserveStateType === 'mergeReplaceArrays' && !moduleStateExists) ||
+    (preserveStateType === 'mergeConcatArrays' && !moduleStateExists)
+  )) {
     store._withCommit(() => {
       if (__DEV__) {
         if (moduleName in parentState) {
@@ -352,10 +359,28 @@ function installModule (store, rootState, path, module, hot) {
           )
         }
       }
+
       Vue.set(parentState, moduleName, module.state)
     })
   }
 
+  // merge stored state with default state, replace arrays
+  if (!isRoot && preserveState && preserveStateType === 'mergeReplaceArrays' && moduleStateExists) {
+    const moduleOriginalState = parentState[moduleName]
+
+    store._withCommit(() => {
+      Vue.set(parentState, moduleName, deepmerge(module.state, moduleOriginalState, { arrayMerge: (target, source, options) => source }))
+    })
+  }
+
+  // merge stored state with default state, concat arrays
+  if (!isRoot && preserveState && preserveStateType === 'mergeConcatArrays' && moduleStateExists) {
+    const moduleOriginalState = parentState[moduleName]
+    store._withCommit(() => {
+      Vue.set(parentState, moduleName, deepmerge(module.state, moduleOriginalState, { arrayMerge: (target, source, options) => target.concat(...source) }))
+    })
+  }
+
   const local = module.context = makeLocalContext(store, namespace, path)
 
   module.forEachMutation((mutation, key) => {
@@ -375,7 +400,7 @@ function installModule (store, rootState, path, module, hot) {
   })
 
   module.forEachChild((child, key) => {
-    installModule(store, rootState, path.concat(key), child, hot)
+    installModule(store, rootState, path.concat(key), child, preserveState)
   })
 }
 

test/unit/modules.spec.js

@@ -124,6 +124,60 @@ describe('Modules', () => {
       store.commit('a/foo')
       expect(mutationSpy).toHaveBeenCalled()
     })
+
+    it('dynamic module registration ignoring hydration if it does not exist', () => {
+      const store = new Vuex.Store({})
+
+      store.registerModule('test', {
+        namespaced: true,
+        state: () => ({ data: '12345' })
+      }, { preserveState: true, preserveStateType: 'existing' })
+
+      expect(store.state.test.data).toBe('12345')
+    })
+
+    it('dynamic module registration merging hydration', () => {
+      const store = new Vuex.Store({})
+      store.replaceState({ test: {
+        foo: 'hello'
+      }})
+
+      store.registerModule('test', {
+        namespaced: true,
+        state: () => ({ bar: 'world' })
+      }, { preserveState: true, preserveStateType: 'mergeReplaceArrays' })
+
+      expect(store.state.test.foo).toBe('hello')
+      expect(store.state.test.bar).toBe('world')
+    })
+
+    it('dynamic module registration merging hydration by replacing arrays', () => {
+      const store = new Vuex.Store({})
+      store.replaceState({ test: {
+        data: ['hello', 'world']
+      }})
+
+      store.registerModule('test', {
+        namespaced: true,
+        state: () => ({ data: ['foo', 'bar'] })
+      }, { preserveState: true, preserveStateType: 'mergeReplaceArrays' })
+
+      expect(store.state.test.data).toEqual(['hello', 'world'])
+    })
+
+    it('dynamic module registration merging hydration by concating arrays', () => {
+      const store = new Vuex.Store({})
+      store.replaceState({ test: {
+        data: ['hello', 'world']
+      }})
+
+      store.registerModule('test', {
+        namespaced: true,
+        state: () => ({ data: ['foo', 'bar'] })
+      }, { preserveState: true, preserveStateType: 'mergeConcatArrays' })
+
+      expect(store.state.test.data).toEqual(['foo', 'bar', 'hello', 'world'])
+    })
   })
 
   // #524

types/index.d.ts

@@ -131,6 +131,7 @@ export interface Module<S, R> {
 
 export interface ModuleOptions {
   preserveState?: boolean;
+  preserveStateType?: 'always' | 'existing' | 'mergeReplaceArrays' | 'mergeConcatArrays';
 }
 
 export interface GetterTree<S, R> {