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) {