Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

(singke) #1
State Management with Vuex Chapter 21

Vuex and Vue devtools


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.


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:

Free download pdf