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...