refactor(vuex): only take snapshots of the store state, closes #848

Author: Guillaume Chau

shells/dev/target/store.js

@@ -57,7 +57,11 @@ export default new Vuex.Store({
         }
       },
       getters: {
-        twoFoos: state => state.foo.repeat(2)
+        twoFoos: state => state.foo.repeat(2),
+        dummy: () => {
+          console.log('dummy getter was computed')
+          return 'dummy'
+        }
       },
       mutations: {
         ADD_BAR: (state) => {

src/backend/hook.js

@@ -98,7 +98,10 @@ export function installHook (target) {
 
   hook.once('vuex:init', store => {
     hook.store = store
-    hook.initialStore = clone(store)
+    hook.initialStore = {
+      state: clone(store.state),
+      getters: store.getters
+    }
   })
 
   Object.defineProperty(target, '__VUE_DEVTOOLS_GLOBAL_HOOK__', {

src/backend/vuex.js

@@ -14,29 +14,26 @@ export function initVuexBackend (hook, bridge, isLegacy) {
     computed: originalVm.$options.computed
   })
 
-  const getSnapshot = (_store = store) => stringify({
-    state: _store.state,
-    getters: _store.getters || {}
-  })
+  const getStateSnapshot = (_store = store) => stringify(_store.state)
 
-  let baseSnapshot, snapshots, mutations, lastState
+  let baseStateSnapshot, stateSnapshots, mutations, lastState
 
   function reset () {
-    baseSnapshot = getSnapshot(hook.initialStore)
+    baseStateSnapshot = getStateSnapshot(hook.initialStore)
     hook.initialStore = undefined
     mutations = []
     resetSnapshotCache()
   }
 
   function resetSnapshotCache () {
-    snapshots = [
-      { index: -1, state: baseSnapshot }
+    stateSnapshots = [
+      { index: -1, state: baseStateSnapshot }
     ]
   }
 
   reset()
 
-  bridge.send('vuex:init', baseSnapshot)
+  bridge.send('vuex:init')
 
   // deal with multiple backend injections
   hook.off('vuex:mutation')
@@ -66,11 +63,11 @@ export function initVuexBackend (hook, bridge, isLegacy) {
 
   // devtool -> application
   bridge.on('vuex:travel-to-state', ({ index, apply }) => {
-    const snapshot = replayMutations(index)
-    const { state } = parse(snapshot, true)
+    const stateSnapshot = replayMutations(index)
+    const state = parse(stateSnapshot, true)
     bridge.send('vuex:inspected-state', {
       index,
-      snapshot
+      snapshot: getSnapshot(stateSnapshot)
     })
     if (apply) {
       hook.emit('vuex:travel-to-state', state)
@@ -86,7 +83,7 @@ export function initVuexBackend (hook, bridge, isLegacy) {
   })
 
   bridge.on('vuex:commit', index => {
-    baseSnapshot = lastState
+    baseStateSnapshot = lastState
     resetSnapshotCache()
     mutations = mutations.slice(index + 1)
     mutations.forEach((mutation, index) => {
@@ -101,45 +98,52 @@ export function initVuexBackend (hook, bridge, isLegacy) {
 
   bridge.on('vuex:import-state', state => {
     hook.emit('vuex:travel-to-state', parse(state, true))
-    bridge.send('vuex:init', getSnapshot())
+    bridge.send('vuex:init')
   })
 
   bridge.on('vuex:inspect-state', index => {
-    const snapshot = replayMutations(index)
-    bridge.send('vuex:inspected-state', {
-      index,
-      snapshot
-    })
+    if (index === -1) {
+      bridge.send('vuex:inspected-state', {
+        index,
+        snapshot: getSnapshot(baseStateSnapshot)
+      })
+    } else {
+      const stateSnapshot = replayMutations(index)
+      bridge.send('vuex:inspected-state', {
+        index,
+        snapshot: getSnapshot(stateSnapshot)
+      })
+    }
   })
 
   function replayMutations (index) {
     store._vm = snapshotsVm
 
     // Get most recent snapshot for target index
     // for faster replay
-    let snapshot
-    for (let i = 0; i < snapshots.length; i++) {
-      const s = snapshots[i]
+    let stateSnapshot
+    for (let i = 0; i < stateSnapshots.length; i++) {
+      const s = stateSnapshots[i]
       if (s.index > index) {
         break
       } else {
-        snapshot = s
+        stateSnapshot = s
       }
     }
 
     let resultState
 
     // Snapshot was already replayed
-    if (snapshot.index === index) {
-      resultState = snapshot.state
+    if (stateSnapshot.index === index) {
+      resultState = stateSnapshot.state
     } else {
-      const { state } = parse(snapshot.state, true)
+      const state = parse(stateSnapshot.state, true)
       store.replaceState(state)
 
       SharedData.snapshotLoading = true
 
       // Replay mutations
-      for (let i = snapshot.index + 1; i <= index; i++) {
+      for (let i = stateSnapshot.index + 1; i <= index; i++) {
         const mutation = mutations[i]
         if (mutation.handlers) {
           if (Array.isArray(mutation.handlers)) {
@@ -155,12 +159,12 @@ export function initVuexBackend (hook, bridge, isLegacy) {
         }
 
         if (i !== index && i % SharedData.cacheVuexSnapshotsEvery === 0) {
-          takeSnapshot(i, state)
+          takeStateSnapshot(i, state)
         }
       }
 
       // Send final state after replay
-      resultState = getSnapshot()
+      resultState = getStateSnapshot()
     }
 
     lastState = resultState
@@ -185,15 +189,34 @@ export function initVuexBackend (hook, bridge, isLegacy) {
     })
   })
 
-  function takeSnapshot (index) {
-    snapshots.push({
+  function takeStateSnapshot (index) {
+    stateSnapshots.push({
       index,
-      state: getSnapshot()
+      state: getStateSnapshot()
     })
     // Delete old cached snapshots
-    if (snapshots.length > SharedData.cacheVuexSnapshotsLimit) {
-      snapshots.splice(1, 1)
+    if (stateSnapshots.length > SharedData.cacheVuexSnapshotsLimit) {
+      stateSnapshots.splice(1, 1)
+    }
+  }
+
+  function getSnapshot (stateSnapshot = null) {
+    if (stateSnapshot) {
+      store._vm = snapshotsVm
+      store.replaceState(parse(stateSnapshot, true))
     }
+
+    const result = stringify({
+      state: store.state,
+      getters: store.getters || {}
+    })
+
+    if (stateSnapshot) {
+      // Restore user state
+      store._vm = originalVm
+    }
+
+    return result
   }
 }
 

src/devtools/index.js

@@ -133,8 +133,8 @@ function initApp (shell) {
       store.commit('components/TOGGLE_INSTANCE', parse(payload))
     })
 
-    bridge.on('vuex:init', snapshot => {
-      store.commit('vuex/INIT', snapshot)
+    bridge.on('vuex:init', () => {
+      store.commit('vuex/INIT')
     })
 
     bridge.on('vuex:mutation', payload => {

src/devtools/views/vuex/module.js

@@ -10,7 +10,6 @@ let uid = 0
 
 const state = {
   hasVuex: false,
-  initial: null,
   base: null, // type Snapshot = { state: {}, getters: {} }
   inspectedIndex: -1,
   activeIndex: -1,
@@ -25,8 +24,7 @@ const state = {
 }
 
 const mutations = {
-  'INIT' (state, snapshot) {
-    state.initial = state.base = snapshot
+  'INIT' (state) {
     state.hasVuex = true
     reset(state)
   },