Use Vue Tools to Navigate Across the Vuex State
Each mutation modifies one part of the state, making it easy to debug and redo-undo modifications. This lesson shows how you can do time-travel navigation and manipulation on you Vuex store by using Vue tools.
[00:00] You have installed the Vue dev tools. You will see a Vue tab here in your browser dev tools. In the right side, you will see a clock tap which is for your Vuex state. Here we see the state and the getters. If we inspect it, you'll see by mlk corresponding to this list here. Now, let's try to add some to-dos.
[00:23] You'll see that here in this panel, all the notations are being recorded. We can navigate through them by clicking the clock button. We can navigate back and forward through the state.
[00:44] By using this button here, we can commit all of these notations into the base state. We click it, and all of those changes has become part of the base state. Let's add some more.
[01:02] Another button interesting here is this one, for revert the notations. What it does is it will delete all notations from here. We click this one, it will delete all those three that there were before. Last, if you want to stop recording for performance or whatever, you can click this button, and then they will not be recorded anymore.