Now that we have a consistent way of interacting with our store via actions, we can take advantage of the Vue devtools to see our state over time. If you haven't installed the Vue devtools already, visit Chapter 2, Proper Creation of Vue Projects, to find more information regarding this.
We'll be using the counter application as an example, to ensure that you have this project running, and right click on Inspect Element from within Chrome (or your browser's equivalent). If we head over to the Vue tab and select Vuex, we can see that the counter has been loaded with the initial application state:
From the preceding screenshot, you can see the count state member as well as the value of any getters. Let's click on the increment button a few times and see what happens:
Awesome! We can see the INCREMENT action as well as a subsequent change to the state and getters, and more information about the mutation itself. Let's see how we can time travel throughout our state:
In the preceding screenshot, I've selected the time travel button on the first action. You can then see that our state is reverted to count: 1, and this is reflected in the rest of the metadata. The application is then updated to reflect this change in state, so we can literally step through each action and see the results on screen. Not only does this help with debugging, but any new state that we add to our application will follow the same process and be visible in this manner.
Let's hit the commit button on an action:
As you can see, this merges all of our actions up to when we hit commit to then be part of our Base State. As a result, the count property is then equal to the action you committed to Base State.