Vuex basics

Vuex is a state management and library for vue.js applications. It serves as a centralized store for all the components in your application.
For example, We have two components and we need to share data both components then we need vuex in vue.js.

Install the Vuex using npm 
npm install — save vuex

How to use vuex in our application
Create a folder inside the folder create file store.js


import Vue from ‘vue’; //Beacuse here we are using plugin vuex
import Vuex from ‘vuex; //import vuex 
Vue.use(Vuex); //Vue.use, now we can used vuex beacuse we added the plugin in vue

export const store = new Vue.Store({
 state: {
 /*State is object that hold’s your application data*/
 getters: {
 /*Getter is function that return back data contained in the state*/
 mutations: {
 /*Mutation is function that directly mutate the state as the state is immutable object*/
 actions: {
/*Action is function that call mutations on the state. They can call multiple mutations can call other actions, and they support asynchrous operations.In actions we can fetch data from the api here.*/

Integrate store into main.js. Now we can use store global in our application for that we need import store in main.js

import store from ‘./store/store’;
new Vue({
 el: ‘#app’,
 store: store,
 render: h => h(App)