Full-Stack Web Development with Vue.js and Node

(singke) #1
Introducing Vuex Chapter 8

The preceding diagram is a simple diagram that explains how Vuex works. Initially,
everything is stored in a state, which is the single source of truth. Every view component


fetches data from this state. Whenever something needs to be changed, actions perform


mutations on the data and store it back in the state:


When we open our application in the browser, all the Vue components will be loaded.
When we click on a button to fetch certain information from a component, that component


dispatches an action that performs mutations on the data. When the mutation is
successfully done, the state object is updated and new values are used. Then, we can use


the new state for our components and display it in the browser.

Free download pdf