diff --git a/cypress/integration/vuex.tab.js b/cypress/integration/vuex.tab.js
index 3cb51fca7..c97b914d5 100644
--- a/cypress/integration/vuex.tab.js
+++ b/cypress/integration/vuex.tab.js
@@ -29,16 +29,18 @@ suite('vuex tab', () => {
it('should filter history', () => {
cy.get('.left .search input').clear().type('inc')
cy.get('.history .entry').should('have.length', 3)
- cy.get('.history .entry.inspected').should('have.length', 0)
+ cy.get('.history .entry.inspected').should('have.length', 1)
cy.get('.history .entry.active').should('have.length', 0)
cy.get('.left .search input').clear().type('/dec/i')
cy.get('.history .entry').should('have.length', 2)
- cy.get('.history .entry.inspected.active').should('have.length', 1)
+ cy.get('.history .entry.inspected').should('have.length', 1)
+ cy.get('.history .entry.active').should('have.length', 0)
cy.get('.left .search input').clear().type('/dec)/i')
cy.get('.history .entry').should('have.length', 4)
- cy.get('.history .entry.inspected.active').should('have.length', 1)
+ cy.get('.history .entry.inspected').should('have.length', 1)
+ cy.get('.history .entry.active').should('have.length', 1)
cy.get('.left .search input').clear()
})
diff --git a/src/devtools/views/events/EventsHistory.vue b/src/devtools/views/events/EventsHistory.vue
index 55213b7cb..15b0b3560 100644
--- a/src/devtools/views/events/EventsHistory.vue
+++ b/src/devtools/views/events/EventsHistory.vue
@@ -52,9 +52,9 @@
v-for="(event, index) in filteredEvents"
ref="entries"
:key="index"
- :class="{ active: inspectedIndex === events.indexOf(event) }"
+ :class="{ active: inspectedIndex === filteredEvents.indexOf(event) }"
class="entry list-item"
- @click="inspect(events.indexOf(event))"
+ @click="inspect(filteredEvents.indexOf(event))"
>
{{ event.eventName }}
{{ event.type }}
@@ -82,7 +82,7 @@ import Keyboard, {
BACKSPACE
} from '../../mixins/keyboard'
import EntryList from '../../mixins/entry-list'
-import { mapState, mapGetters, mapMutations } from 'vuex'
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
import { classify, focusInput } from 'src/util'
export default {
@@ -143,17 +143,21 @@ export default {
},
set (filter) {
this.$store.commit('events/UPDATE_FILTER', filter)
+ this.$store.commit('events/INSPECT', -1)
}
}
},
methods: {
...mapMutations('events', {
- inspect: 'INSPECT',
reset: 'RESET',
toggleRecording: 'TOGGLE'
}),
+ ...mapActions('events', [
+ 'inspect'
+ ]),
+
displayComponentName (name) {
return this.$shared.classifyComponents ? classify(name) : name
}
diff --git a/src/devtools/views/events/module.js b/src/devtools/views/events/module.js
index 90187925f..a324406dc 100644
--- a/src/devtools/views/events/module.js
+++ b/src/devtools/views/events/module.js
@@ -25,8 +25,6 @@ const mutations = {
state.inspectedIndex = -1
},
'INSPECT' (state, index) {
- if (index < 0) index = 0
- if (index >= state.events.length) index = state.events.length - 1
state.inspectedIndex = index
},
'RESET_NEW_EVENT_COUNT' (state) {
@@ -45,8 +43,8 @@ const mutations = {
}
const getters = {
- activeEvent: state => {
- return state.events[state.inspectedIndex]
+ activeEvent: (state, getters) => {
+ return getters.filteredEvents[state.inspectedIndex]
},
filteredEvents: (state, getters, rootState) => {
const classifyComponents = SharedData.classifyComponents
@@ -61,9 +59,18 @@ const getters = {
}
}
+const actions = {
+ inspect: ({ commit, getters }, index) => {
+ if (index < 0) index = 0
+ if (index >= getters.filteredEvents.length) index = getters.filteredEvents.length - 1
+ commit('INSPECT', index)
+ }
+}
+
export default {
namespaced: true,
state,
mutations,
- getters
+ getters,
+ actions
}
diff --git a/src/devtools/views/vuex/VuexHistory.vue b/src/devtools/views/vuex/VuexHistory.vue
index a3f3f5840..337f3e89e 100644
--- a/src/devtools/views/vuex/VuexHistory.vue
+++ b/src/devtools/views/vuex/VuexHistory.vue
@@ -227,6 +227,7 @@ export default {
},
set (filter) {
this.$store.dispatch('vuex/updateFilter', filter)
+ this.$store.commit('vuex/INSPECT', -1)
}
}
},
@@ -244,11 +245,11 @@ export default {
]),
isActive (entry) {
- return this.activeIndex === this.history.indexOf(entry)
+ return this.activeIndex === this.filteredHistory.indexOf(entry)
},
isInspected (entry) {
- return this.inspectedIndex === this.history.indexOf(entry)
+ return this.inspectedIndex === this.filteredHistory.indexOf(entry)
}
}
}
diff --git a/src/devtools/views/vuex/actions.js b/src/devtools/views/vuex/actions.js
index e607c3454..55200aaca 100644
--- a/src/devtools/views/vuex/actions.js
+++ b/src/devtools/views/vuex/actions.js
@@ -30,12 +30,12 @@ export function revert ({ commit, state }, entry) {
}
}
-export function inspect ({ commit, state }, entryOrIndex) {
+export function inspect ({ commit, getters }, entryOrIndex) {
let index = typeof entryOrIndex === 'number'
? entryOrIndex
- : state.history.indexOf(entryOrIndex)
+ : getters.filteredHistory.indexOf(entryOrIndex)
if (index < -1) index = -1
- if (index >= state.history.length) index = state.history.length - 1
+ if (index >= getters.filteredHistory.length) index = getters.filteredHistory.length - 1
commit('INSPECT', index)
}
diff --git a/src/devtools/views/vuex/module.js b/src/devtools/views/vuex/module.js
index 6a442085b..3c2162557 100644
--- a/src/devtools/views/vuex/module.js
+++ b/src/devtools/views/vuex/module.js
@@ -91,8 +91,8 @@ function escapeStringForRegExp (str) {
}
const getters = {
- inspectedState ({ base, history, inspectedIndex }) {
- const entry = history[inspectedIndex]
+ inspectedState ({ base, inspectedIndex }, getters) {
+ const entry = getters.filteredHistory[inspectedIndex]
const res = {}
if (entry) {