vuex: fix history bug when filtering

yyx990803 · yyx990803 · commit 5819e63fd18c · 2017-01-03T19:28:50.000-05:00
diff --git a/src/devtools/views/vuex/VuexHistory.vue b/src/devtools/views/vuex/VuexHistory.vue
@@ -35,11 +35,11 @@
         <span class="label inspected" v-if="inspectedIndex === -1">inspected</span>
       </div>
       <div class="entry"
-        v-for="(entry, index) in filteredHistory"
-        :class="{ inspected: inspectedIndex === index, active: activeIndex === index }"
-        @click="step(index)">
+        v-for="entry in filteredHistory"
+        :class="{ inspected: isInspected(entry), active: isActive(entry) }"
+        @click="step(entry)">
         <span class="mutation-type">{{ entry.mutation.type }}</span>
-        <span class="entry-actions" v-if="inspectedIndex === index">
+        <span class="entry-actions" v-if="isInspected(entry)">
           <a class="action" @click.stop="commitSelected" title="Commit This Mutation">
             <i class="material-icons">get_app</i>
             <span>Commit</span>
@@ -48,16 +48,16 @@
             <i class="material-icons">delete</i>
             <span>Revert</span>
           </a>
-          <a v-if="activeIndex !== index" class="action" @click.stop="timeTravelToSelected" title="Time Travel to This State">
+          <a v-if="!isActive(entry)" class="action" @click.stop="timeTravelToSelected" title="Time Travel to This State">
             <i class="material-icons">restore</i>
             <span>Time Travel</span>
           </a>
         </span>
         <span class="time" :title="entry.timestamp">
           {{ entry.timestamp | formatTime }}
         </span>
-        <span class="label active" v-if="activeIndex === index">active</span>
-        <span class="label inspected" v-if="inspectedIndex === index">inspected</span>
+        <span class="label active" v-if="isActive(entry)">active</span>
+        <span class="label inspected" v-if="isInspected(entry)">inspected</span>
       </div>
     </div>
   </scroll-pane>
@@ -129,6 +129,12 @@ export default {
       'step',
       'timeTravelToSelected'
     ]),
+    isActive (entry) {
+      return this.activeIndex === this.history.indexOf(entry)
+    },
+    isInspected (entry) {
+      return this.inspectedIndex === this.history.indexOf(entry)
+    },
     onKeyNav (dir) {
       if (dir === 'up') {
         this.step(this.inspectedIndex - 1)
diff --git a/src/devtools/views/vuex/actions.js b/src/devtools/views/vuex/actions.js
@@ -27,8 +27,11 @@ export function reset ({ commit, state }) {
   travelTo(state, commit)
 }
 
-export function step ({ commit, state }, index) {
-  commit('STEP', index)
+export function step ({ commit, state }, entry) {
+  const index = state.history.indexOf(entry)
+  if (index > -1) {
+    commit('STEP', index)
+  }
 }
 
 export function timeTravelToSelected ({ state, commit }) {

Original file line number	Diff line number	Diff line change
`@@ -27,8 +27,11 @@ export function reset ({ commit, state }) {`
`27`	`27`	`travelTo(state, commit)`
`28`	`28`	`}`
`29`	`29`
`30`		`-export function step ({ commit, state }, index) {`
`31`		`- commit('STEP', index)`
	`30`	`+export function step ({ commit, state }, entry) {`
	`31`	`+ const index = state.history.indexOf(entry)`
	`32`	`+ if (index > -1) {`
	`33`	`+ commit('STEP', index)`
	`34`	`+ }`
`32`	`35`	`}`
`33`	`36`
`34`	`37`	`export function timeTravelToSelected ({ state, commit }) {`