fix(vuex): nested dynamic module support, closes #919

Author: Guillaume Chau

shells/dev/target/Counter.vue

@@ -58,6 +58,24 @@
       >
         Remove dynamic module
       </button>
+      <button
+        :disabled="!$store.state.dynamic || $store.state.dynamic.nested"
+        @click="addDynamicNestedModule()"
+      >
+        Add dynamic nested module
+      </button>
+      <button
+        :disabled="!$store.state.dynamic || !$store.state.dynamic.nested"
+        @click="toggleDynamicNested()"
+      >
+        Toggle dynamic nested state
+      </button>
+      <button
+        :disabled="!$store.state.dynamic || !$store.state.dynamic.nested"
+        @click="removeDynamicNestedModule()"
+      >
+        Remove dynamic nested module
+      </button>
     </div>
 
     <pre>{{ $store.state.instant }}</pre>
@@ -68,7 +86,7 @@
 
 <script>
 import { mapState, mapGetters, mapMutations } from 'vuex'
-import DynamicModule from './dynamic-module'
+import { dynamic, nested } from './dynamic-module'
 import NoProp from './NoProp.vue'
 
 export default {
@@ -137,7 +155,7 @@ export default {
     }),
 
     addDynamicModule () {
-      this.$store.registerModule('dynamic', DynamicModule)
+      this.$store.registerModule('dynamic', dynamic)
     },
 
     removeDynamicModule () {
@@ -146,6 +164,18 @@ export default {
 
     toggleDynamic () {
       this.$store.commit('dynamic/TOGGLE')
+    },
+
+    addDynamicNestedModule () {
+      this.$store.registerModule(['dynamic', 'nested'], nested)
+    },
+
+    removeDynamicNestedModule () {
+      this.$store.unregisterModule(['dynamic', 'nested'])
+    },
+
+    toggleDynamicNested () {
+      this.$store.commit('dynamic/TOGGLE')
     }
   }
 }

shells/dev/target/dynamic-module.js

@@ -1,4 +1,4 @@
-export default {
+export const dynamic = {
   namespaced: true,
   state () {
     return {
@@ -7,7 +7,6 @@ export default {
   },
   getters: {
     notDynamic: state => {
-      console.log('notDynamic', JSON.stringify(state, null, 2))
       if (state) return !state.dynamic
     }
   },
@@ -17,3 +16,22 @@ export default {
     }
   }
 }
+
+export const nested = {
+  namespaced: true,
+  state () {
+    return {
+      nested: true
+    }
+  },
+  getters: {
+    notNested: state => {
+      if (state) return !state.nested
+    }
+  },
+  mutations: {
+    TOGGLE_NESTED: state => {
+      state.nested = !state.nested
+    }
+  }
+}

src/backend/vuex.js

@@ -236,7 +236,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
       } else {
         tempRemovedModules = Object.keys(registeredModules)
       }
-      tempRemovedModules.forEach(m => {
+      tempRemovedModules.sort((a, b) => b.length - a.length).forEach(m => {
         origUnregisterModule(m.split('/'))
       })
 
@@ -254,7 +254,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
           tempAddedModules.push(path.join('/'))
           origRegisterModule(path, module, options)
           updateSnapshotsVm(store.state)
-        } else if (mutation.unregisterModule && get(store.state, mutation.payload.path.join('.')) != null) {
+        } else if (mutation.unregisterModule && get(store.state, mutation.payload.path) != null) {
           const path = mutation.payload.path
           const index = tempAddedModules.indexOf(path.join('/'))
           if (index !== -1) tempAddedModules.splice(index, 1)
@@ -292,10 +292,10 @@ export function initVuexBackend (hook, bridge, isLegacy) {
     })
 
     // Restore user state
-    tempAddedModules.forEach(m => {
+    tempAddedModules.sort((a, b) => b.length - a.length).forEach(m => {
       origUnregisterModule(m.split('/'))
     })
-    tempRemovedModules.forEach(m => {
+    tempRemovedModules.sort((a, b) => a.length - b.length).forEach(m => {
       const { path, module, options } = registeredModules[m]
       origRegisterModule(path, module, options)
     })
@@ -353,7 +353,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
   function ensureRegisteredModules (mutation) {
     if (mutation) {
       mutation.registeredModules.forEach(m => {
-        if (!Object.keys(registeredModules).includes(m)) {
+        if (!Object.keys(registeredModules).sort((a, b) => a.length - b.length).includes(m)) {
           const data = allTimeModules[m]
           if (data) {
             const { path, module, options } = data
@@ -362,7 +362,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
           }
         }
       })
-      Object.keys(registeredModules).forEach(m => {
+      Object.keys(registeredModules).sort((a, b) => b.length - a.length).forEach(m => {
         if (!mutation.registeredModules.includes(m)) {
           origUnregisterModule(m.split('/'))
           delete registeredModules[m]

src/util.js

@@ -516,7 +516,7 @@ export function sortByKey (state) {
 }
 
 export function set (object, path, value, cb = null) {
-  const sections = path.split('.')
+  const sections = Array.isArray(path) ? path : path.split('.')
   while (sections.length > 1) {
     object = object[sections.shift()]
   }
@@ -529,7 +529,7 @@ export function set (object, path, value, cb = null) {
 }
 
 export function get (object, path) {
-  const sections = path.split('.')
+  const sections = Array.isArray(path) ? path : path.split('.')
   for (let i = 0; i < sections.length; i++) {
     object = object[sections[i]]
     if (!object) {
@@ -544,7 +544,7 @@ export function has (object, path, parent = false) {
     return false
   }
 
-  const sections = path.split('.')
+  const sections = Array.isArray(path) ? path : path.split('.')
   const size = !parent ? 1 : 2
   while (sections.length > size) {
     object = object[sections.shift()]