About

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

Every component has it's own scope of it's property. Other component cannot access another component's property. Not even it's parent component's property. There might be a situation where you need some common property that is kind of shared by all the component. This can be achieved by a Event Bus component but it's not very efficient to do and looses the readibility and difficult to manage as your number of property grows. Event Bus component also very difficult for deeply nested component. Vue state management pattern makes this easy to maintain with ease. It's very useful if you are dealing with large scale application where multiple component depends on some common data or state.

Store

Store is the center of the Vuex application. A "store" is basically a container that holds your application state. There are two things that make a Vuex store different from a plain global object:

• Vuex stores are reactive. When Vue components retrieve state from it, they will reactively and efficiently update if the store's state changes.
• You cannot directly mutate the store's state. The only way to change a store's state is by explicitly committing mutations. This ensures every state change leaves a track-able record, and enables tooling that helps us better understand our applications.

		const store = new Vuex.Store({
			state: {
			count: 0,
			name : "Santanu Bera"
			},
			mutations: {
			increment (state) {
				state.count++
			}
			}
		});
		new Vue({
			el : ".Content",
			data : {

			}
		})
		

This is the simplest structure of Vuex. We create a store using Vuex.Store() constructor. This constructor accepts an object. Within this object we can have many options. One of them is state which contains the states(data) and second object is the mutations, collection of methods, through which we will be able to change the value of these states.

			Vue.component('demo',{
				template : "<div>{ { name } }</div>",
				data:function(){
					return {
						name : store.state.name
					}
				}
			});
		

The above component will be able to display the name "Santanu Bera". The state store is accessible to every component. If one component change the store then this changes will be automatically be updated in another component. Cool. No more watching for property for changing. So, let's learn how to change the state from a component. Notice, in the mutations there's a method called increment that is responsible for incrementing the value by one. Let's do it.

			Vue.component('demo',{
				template : `
					<div>
						<div>Count : { { count } }</div>
						<br>
						<button v-on:click="incre">Raise</button>
					</div>
				`,
				data:function(){
					return {
						count : store.state.count
					};
				},
				methods:{
					incre:function(){
						store.commit('increment');
					}
				}
			});
		

The above component will output the following -

So, to change a state you need to call the commit method of the store object. And pass the mutation method name as the string. Letter we will learn how to pass data to the mutation method. But wait, the above demo is not working -

This is because the states are reactive. It means whenever a state changes it is automatically updated to every component. But as we have assigned it directly within the component, the component doesn't react to state's changes. So we need to access it from a computed propety so that the component can reevaluate the value whenever state changes. Now you know what to do.

			Vue.component('demo1', {
				template : `
					<div>
						<div>Count : { { count }}</div>
						<br>
						<button v-on:click="incre">Raise</button>
					</div>
				`,
				computed:{
					count:function(){
						return store.state.count;
					}
				},
				methods:{
					incre:function(){
						store.commit('increment');
					}
				}
			});
		

Now it's okay.