fix(vuex): last inspected state should apply filters/grouping

Author: Guillaume Chau

packages/app-frontend/src/views/vuex/VuexStateInspector.vue

@@ -160,16 +160,16 @@ export default {
 
     ...mapGetters('vuex', [
       'inspectedState',
+      'inspectedLastState',
       'filteredHistory',
       'inspectedEntry',
       'modules'
     ]),
 
     filteredState () {
-      const inspectedState = this.isOnlyMutationPayload && this.inspectedState.mutation ? {
-        mutation: this.inspectedState.mutation,
-        ...this.lastReceivedState
-      } : this.inspectedState
+      const inspectedState = this.isOnlyMutationPayload && this.inspectedState.mutation
+        ? this.inspectedLastState
+        : this.inspectedState
 
       const getProcessedState = (state, type) => {
         if (!Array.isArray(state)) {

packages/app-frontend/src/views/vuex/module.js

@@ -127,58 +127,17 @@ function escapeStringForRegExp (str) {
 }
 
 const getters = {
-  inspectedState ({ base, inspectedIndex, inspectedState, inspectedModule }, getters) {
-    const entry = getters.filteredHistory[inspectedIndex]
-    const res = {}
-
-    if (entry) {
-      res.mutation = {
-        type: entry.mutation.type,
-        payload: entry.mutation.payload ? parse(entry.mutation.payload) : undefined
-      }
-    }
-
-    const data = entry ? inspectedState : base
-    if (data) {
-      res.state = data.state
-      res.getters = data.getters
-
-      if (inspectedModule) {
-        res.state = get(res.state, inspectedModule.replace(/\//g, '.'))
-
-        if (res.getters) {
-          res.getters = Object.keys(res.getters)
-            .filter(key => key.startsWith(inspectedModule))
-            .reduce((obj, key) => {
-              obj[key.substr(inspectedModule.length + 1)] = res.getters[key]
-              return obj
-            }, {})
-        }
-      }
-    }
+  inspectedEntry ({ inspectedIndex }, { filteredHistory }) {
+    return filteredHistory[inspectedIndex]
+  },
 
-    if (SharedData.vuexGroupGettersByModule && res.getters) {
-      const getterGroups = {}
-      const keys = Object.keys(res.getters)
-      keys.forEach(key => {
-        const parts = key.split('/')
-        let parent = getterGroups
-        for (let p = 0; p < parts.length - 1; p++) {
-          const part = parts[p]
-          parent = parent[part] = parent[part] || {
-            _custom: {
-              value: {},
-              abstract: true
-            }
-          }
-          parent = parent._custom.value
-        }
-        parent[parts.pop()] = res.getters[key]
-      })
-      res.getters = getterGroups
-    }
+  inspectedState ({ base, inspectedIndex, inspectedState, inspectedModule }, { inspectedEntry }) {
+    const data = inspectedEntry ? inspectedState : base
+    return processInspectedState({ entry: inspectedEntry, data, inspectedModule })
+  },
 
-    return res
+  inspectedLastState ({ lastReceivedState, inspectedModule }, { inspectedEntry }) {
+    return processInspectedState({ entry: inspectedEntry, data: lastReceivedState, inspectedModule })
   },
 
   filteredHistory ({ history, filterRegex }) {
@@ -193,10 +152,6 @@ const getters = {
     return -1
   },
 
-  inspectedEntry ({ inspectedIndex }, { filteredHistory }) {
-    return filteredHistory[inspectedIndex]
-  },
-
   modules ({ base, inspectedIndex, inspectedState }, getters) {
     const entry = getters.filteredHistory[inspectedIndex]
     const data = entry ? inspectedState : base
@@ -207,6 +162,58 @@ const getters = {
   }
 }
 
+function processInspectedState ({ entry, data, inspectedModule }) {
+  const res = {}
+
+  if (entry) {
+    res.mutation = {
+      type: entry.mutation.type,
+      payload: entry.mutation.payload ? parse(entry.mutation.payload) : undefined
+    }
+  }
+
+  if (data) {
+    res.state = data.state
+    res.getters = data.getters
+
+    if (inspectedModule) {
+      res.state = get(res.state, inspectedModule.replace(/\//g, '.'))
+
+      if (res.getters) {
+        res.getters = Object.keys(res.getters)
+          .filter(key => key.startsWith(inspectedModule))
+          .reduce((obj, key) => {
+            obj[key.substr(inspectedModule.length + 1)] = res.getters[key]
+            return obj
+          }, {})
+      }
+    }
+  }
+
+  if (SharedData.vuexGroupGettersByModule && res.getters) {
+    const getterGroups = {}
+    const keys = Object.keys(res.getters)
+    keys.forEach(key => {
+      const parts = key.split('/')
+      let parent = getterGroups
+      for (let p = 0; p < parts.length - 1; p++) {
+        const part = parts[p]
+        parent = parent[part] = parent[part] || {
+          _custom: {
+            value: {},
+            abstract: true
+          }
+        }
+        parent = parent._custom.value
+      }
+      parent[parts.pop()] = res.getters[key]
+    })
+    res.getters = getterGroups
+  }
+
+  return res
+}
+
 export default {
   namespaced: true,
   state,