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

State Management with Vuex Chapter 21

Vuex state flow

Let's break down this example into a step-by-step process:

1. Initial State is rendered inside of a Vue component.


2. A Vue component dispatches an Action to get some data from a Backend API.


3. This then fires a Commit event that is handled by a Mutation. This Mutation
   returns a new version of the state containing the data from the Backend API.


4. The process can then be seen in the Vue Devtools, and you have the ability to
   "time travel" between different versions of the previous state that takes place
   within the application.


5. The new State is then rendered inside of the Vue Components.