Using Vue Dev Tools and Testing Your SPA Chapter 12Revert this mutation: This will undo the mutation and all mutations after this
point. This allows you to carry out the same actions again and again without
pressing refresh or losing your current place. For example, when adding a
product to the basket in our shop app, a mutation occurs. Using this would allow
you to remove the product from the basket and undo any following mutations
without navigating away from the product page.
Time-travel to this state: This allows you to preview the app and state at that
particular mutation, without reverting any mutations that occur after the selected
point.The mutations tab also allows you to commit or revert all mutations at the top of the left-
hand panel. Within the right-hand panel, you can also import and export a JSON encoded
version of the store's state. This is particularly handy when you want to re-test several
circumstances and instances without having to reproduce several steps.
Previewing event data
The Events tab of the Vue developer tools works in a similar way to the Vuex tab, allowing
you to inspect any events emitted throughout your app. Our Dropbox app doesn't use
events, so open up the people-filtering app we created in Chapter 2, Displaying, Looping,
Searching, and Filtering Data, and Chapter 3, Optimizing our App and Using Components to
Display Data, of this book.
Changing the filters in this app emits an event each time the filter type is updated, along
with the filter query: