feat(vue2): inspect getters in mutation tl layer

Author: Akryum

packages/app-backend-vue2/src/index.ts

@@ -76,7 +76,7 @@ export const backend: DevtoolsBackend = {
     const { Vue } = appRecord.options.meta
     const app = appRecord.options.app
     wrapVueForEvents(app, Vue, api.ctx)
-    setupPlugin(api, app)
+    setupPlugin(api, app, Vue)
   }
 }
 

packages/app-backend-vue2/src/plugin.ts

@@ -5,7 +5,7 @@ import copy from 'clone-deep'
 
 let actionId = 0
 
-export function setupPlugin (api: DevtoolsApi, app: App) {
+export function setupPlugin (api: DevtoolsApi, app: App, Vue) {
   const ROUTER_INSPECTOR_ID = 'vue2-router-inspector'
   const ROUTER_CHANGES_LAYER_ID = 'vue2-router-changes'
 
@@ -198,6 +198,29 @@ export function setupPlugin (api: DevtoolsApi, app: App) {
           })
         }
       }, { prepend: true })
+
+      // Inspect getters on mutations
+      api.on.inspectTimelineEvent(payload => {
+        if (payload.layerId === VUEX_MUTATIONS_ID) {
+          const getterKeys = Object.keys(store.getters)
+          if (getterKeys.length) {
+            const vm = new Vue({
+              data: {
+                $$state: payload.data.state
+              },
+              computed: store._vm.$options.computed
+            })
+            const originalVm = store._vm
+            store._vm = vm
+
+            const tree = transformPathsToObjectTree(store.getters)
+            payload.data.getters = copy(tree)
+
+            store._vm = originalVm
+            vm.$destroy()
+          }
+        }
+      })
     }
   })
 }