The official documentation of Vuex defines it as a state management pattern + library for Vue applications. But what does this mean?
Imagine working on a large web app with hundreds of routes and components. Wouldn't it be easier if we could store all the data we ever need inside the app, in one centralized storage location?
Every component or route inside our application will request data from the Vuex state and commits modified data back to the state.
In essence, the Vuex state can be viewed as a single source of truth for the entire application.
Data is stored inside the state as a single JSON object. For example :
state : {
name : "hive blog",
age : 28
}
You will now access the state on any vue component by
this.$store.state.name // this will return "hive blog"
Whenever you want to update this state, you will simply need to create a mutation and call it from any other vue component just like:
this.$store.commit('updateName', 'HIVE NEW NAME')
And this will put the store like so :
state : {
name : "hive blog",
age : 28
}