diff --git a/shells/dev/target/Counter.vue b/shells/dev/target/Counter.vue index 34329d326..86a54b3a6 100644 --- a/shells/dev/target/Counter.vue +++ b/shells/dev/target/Counter.vue @@ -3,6 +3,8 @@

{{ count }}

+ +

Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}

diff --git a/shells/dev/target/store.js b/shells/dev/target/store.js index 649c70c9f..90c222b35 100644 --- a/shells/dev/target/store.js +++ b/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 } }) diff --git a/src/backend/vuex.js b/src/backend/vuex.js index 440ecabd1..cc92e9348 100644 --- a/src/backend/vuex.js +++ b/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 }) diff --git a/src/devtools/index.js b/src/devtools/index.js index 9fe4ed1db..5216d5f59 100644 --- a/src/devtools/index.js +++ b/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 => { diff --git a/src/devtools/views/vuex/VuexStateInspector.vue b/src/devtools/views/vuex/VuexStateInspector.vue index 7db635cff..d3160ee6e 100644 --- a/src/devtools/views/vuex/VuexStateInspector.vue +++ b/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 diff --git a/src/devtools/views/vuex/actions.js b/src/devtools/views/vuex/actions.js index bd5e69dbc..09477d5da 100644 --- a/src/devtools/views/vuex/actions.js +++ b/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) } diff --git a/src/devtools/views/vuex/module.js b/src/devtools/views/vuex/module.js index fe19be420..4b0c70825 100644 --- a/src/devtools/views/vuex/module.js +++ b/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,7 +35,10 @@ 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) }, @@ -43,7 +46,10 @@ const mutations = { 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 }, diff --git a/test/specs/test.js b/test/specs/test.js index 0cbcb2dd7..bc5451ead 100644 --- a/test/specs/test.js +++ b/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')