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