List getters in Vuex tab

shells/dev/target/Counter.vue

@@ -3,6 +3,8 @@
     <p>{{ count }}</p>
     <button class="increment" @click="increment">+1</button>
     <button class="decrement" @click="decrement">-1</button>
+
+    <p>Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}</p>
   </div>
 </template>
 

shells/dev/target/store.js

@@ -10,5 +10,8 @@ export default new Vuex.Store({
   mutations: {
     INCREMENT: state => state.count++,
     DECREMENT: state => state.count--
+  },
+  getters: {
+    isPositive: state => state.count >= 0
   }
 })

src/backend/vuex.js

@@ -3,7 +3,10 @@ import { stringify, parse } from '../util'
 export function initVuexBackend (hook, bridge) {
   const store = hook.store
   let recording = true
-  bridge.send('vuex:init', stringify(store.state))
+  bridge.send('vuex:init', {
+    state: stringify(store.state),
+    getters: stringify(store.getters)
+  })
 
   // deal with multiple backend injections
   hook.off('vuex:mutation')
@@ -17,7 +20,8 @@ export function initVuexBackend (hook, bridge) {
         payload: stringify(mutation.payload)
       },
       timestamp: Date.now(),
-      state: stringify(state)
+      state: stringify(state),
+      getters: stringify(store.getters)
     })
   })
 
@@ -26,6 +30,14 @@ export function initVuexBackend (hook, bridge) {
     hook.emit('vuex:travel-to-state', parse(state, true /* revive */))
   })
 
+  bridge.on('vuex:import-state', state => {
+    hook.emit('vuex:travel-to-state', parse(state, true /* revive */))
+    bridge.send('vuex:init', {
+      state,
+      getters: stringify(store.getters)
+    })
+  })
+
   bridge.on('vuex:toggle-recording', enabled => {
     recording = enabled
   })

src/devtools/index.js

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

src/devtools/views/vuex/VuexStateInspector.vue

@@ -98,7 +98,7 @@ export default {
       } else {
         try {
           parse(importedStr) // Try to parse
-          this.$store.dispatch('vuex/importState', importedStr)
+          bridge.send('vuex:import-state', importedStr)
           this.showBadJSONMessage = false
         } catch (e) {
           this.showBadJSONMessage = true

src/devtools/views/vuex/actions.js

@@ -46,18 +46,14 @@ export function toggleRecording ({ state, commit }) {
   bridge.send('vuex:toggle-recording', state.enabled)
 }
 
-export function importState ({ commit, dispatch }, importedState) {
-  commit('INIT', importedState)
-  dispatch('reset')
-}
-
 export function updateFilter ({ commit }, filter) {
   commit('UPDATE_FILTER', filter)
 }
 
 function travelTo (state, commit, index) {
   const { history, base } = state
-  const targetState = index > -1 ? history[index].state : base
+  const targetState = index > -1 ? history[index].state : base.state
+
   bridge.send('vuex:travel-to-state', targetState)
   commit('TIME_TRAVEL', index)
 }

src/devtools/views/vuex/module.js

@@ -23,8 +23,8 @@ const state = {
 }
 
 const mutations = {
-  'INIT' (state, initialState) {
-    state.initial = state.base = initialState
+  'INIT' (state, initial) {
+    state.initial = state.base = {state: initial.state, getters: initial.getters}
     state.hasVuex = true
     reset(state)
   },
@@ -35,15 +35,21 @@ const mutations = {
     }
   },
   'COMMIT_ALL' (state) {
-    state.base = state.history[state.history.length - 1].state
+    state.base = {
+      state: state.history[state.history.length - 1].state,
+      getters: state.history[state.history.length - 1].getters
+    }
     state.lastCommit = Date.now()
     reset(state)
   },
   'REVERT_ALL' (state) {
     reset(state)
   },
   'COMMIT' (state, index) {
-    state.base = state.history[index].state
+    state.base = {
+      state: state.history[index].state,
+      getters: state.history[index].getters
+    }
     state.lastCommit = Date.now()
     state.history = state.history.slice(index + 1)
     state.inspectedIndex = -1
@@ -100,7 +106,9 @@ const getters = {
         res.payload = parse(entry.mutation.payload)
       }
     }
-    res.state = parse(entry ? entry.state : base)
+
+    res.state = parse(entry ? entry.state : base.state)
+    res.getters = parse(entry ? entry.getters : base.getters)
     return res
   },
 

test/specs/test.js

@@ -150,6 +150,16 @@ module.exports = {
         .assert.containsText('#counter p', '2')
         .frame(null)
 
+      // getters
+      .assert.containsText('.vuex-state-inspector', 'isPositive:true')
+      .frame('target')
+        .click('.decrement')
+        .click('.decrement')
+        .click('.decrement')
+        .frame(null)
+      .click('.history .entry:nth-child(4)')
+      .assert.containsText('.vuex-state-inspector', 'isPositive:false')
+
       // toggle recording
       .click('.toggle-recording')
       .assert.containsText('.toggle-recording', 'Paused')
@@ -158,7 +168,7 @@ module.exports = {
       .frame('target')
         .click('.increment')
         .frame(null)
-      .assert.count('.history .entry', 1)
+      .assert.count('.history .entry', 4)
 
       // copy vuex state
       .click('.export')