Vuex

Vuex provides a powerful way to manage the data of an application as the complexity of the UI increases, by centralizing the application's data into a single store.

We can get snapshots of the application's state by inspecting the store in Vue Devtools:

Figure 1.2. Vue Devtools Vuex tab

The left column tracks changes made to the application data. For example, say the user saves or unsaves an item. You might name this eventtoggleSaved. Vue Devtools lets you see the particulars of this event as it occurs.

We can also revert to any previous state of the data without having to touch the code or reload the page. This function, calledTime Travel Debugging, is something you'll find very useful for debugging complex UIs.