When an application grows in size, both in terms of features and codebase, managing state becomes difficult and using an endless network of downstream props and upstream events is certainly not a wise decision. In such a situation, it becomes necessary to offload state management to a central management system. The Vue ecosystem offers Vuex which is the official state management library and also a recommended pattern for storing state centrally.
Vuex allows maintenance of a central state. Components use Vuex as a reactive data store and update when the state updates. Multiple and non-related components can depend on the same and central state store.
In this case, Vue acts as a pure View layer. To modify the state, the view layer (such as a button or an interactive component) needs to issue a Vuex ‘Action’, which then does the desired task. To update or mutate the state, Vuex offers ‘Mutations’. An action commits a mutation and only then the state updates.
The purpose of this workflow is to leave a trail of operations that can be used/audited.
