We got a glimpse of these core concepts in the introduction. Now, let's dive into a little bit more detail on each of these concepts:
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.
...