Vue State Management tutorial using Vuex
In this post we will give you information about Vue State Management tutorial using Vuex. Hear we will give you detail about Vue State Management tutorial using VuexAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to manage the state in vue.js apps by using the vuex library.
What is Vuex?
Vuex is state management library created by the Vue core team which helps us to manage the centralized state in vue apps it means we can maintain our whole app state in one place.
Why we need Vuex?
In large apps, it’s hard to maintain the app state in components and share data between other components by using props which is often unpredictable, so that we need the ‘vuex’ to create a centralized state.
Getting started
This tutorial assumes that you already installed vue cli in your pc.
Let’s create a new vue app by running the following command in your terminal.
vue create learn-vuex && cd $_
This above command creates a new vue project inside learn-vuex folder and also change your current working directory to learn-vuex.
Installing Vuex
Let’s install the vuex library by running the below command.
npm i vuex
Creating vuex store
Once you successfully installed the vuexlibrary now open your learn-vuex folder in your favoritecode editor and create a new file called store.js in your src folder.
In the above code, we have imported a ‘vuex’ library and telling vue to use Vuex library.
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({});The store is holding our whole app state in a reactive JavaScript object it means if we update in a state in one place it will also update state in other places we used it.
To access the store object inside your vue components we need to pass the store to our root vue instance present inside main.js file.
import Vue from 'vue'import App from './App.vue'import { store } from './store';Vue.config.productionTip = falsenew Vue({ store, render: h => h(App),}).$mount('#app')Let’s add a console.log inside our App.vue file to see if vuex store is available in vue components.
<template> <div id="app"></div></template><script>export default { created: function() { console.log(this.$store); }};</script>So far we just created a vuex store but we didn’t add any state to our store let’s add it now.
Adding state to Vuex store
The state is a reserved property in vuex, which is an object where we can add our app initial state.
Let’s update our store.js file by adding the state.
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({ state: { count: 0 }});Accessing the state
Now we can access the state inside our vue components by creating a computed property.
<template> <div id="app"> <span><h1>{{count}}</h1> </div></template><script>export default { computed: { count: function() { return this.$store.state.count; } }};</script>Adding mutations to Vuex store
In vuex, we can’t directly update state directly the only way to update the state is by adding a mutation.
Note: Mutations work in synchronous fashion.
Let’s add an INCREMENT_COUNT mutation which is used to update our count value by ‘1’.
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({ state: { count: 0 }, mutations: { INCREMENT_COUNT(state) { state.count += 1 } }});Every mutation function will receive state as its first parameter.
Now we can invoke the mutation function inside our vue component by running a commit method with an argument mutation name.
<template> <div id="app"> <h1>{{count}}</h1> <button @click="increment">Increment</button> </div></template><script>export default { computed: { count: function() { return this.$store.state.count; } }, methods: { increment() { //invoking the 'INCREMENT_COUNT' mutation this.$store.commit("INCREMENT_COUNT"); } }};</script>Passing dynamic arguments to mutations
We can also pass dynamic arguments to the mutations at the time of committing a mutation.
Let’s update our INCREMNT_COUNT mutation in store.js file so that it can accept dynamic arguments.
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({ state: { count: 0 }, mutations: { INCREMENT_COUNT(state, value) { state.count += value } }});Now inside our vue component we can commit a INCREMENT_COUNT mutation by passing a value.
<template> <div id="app"> <h1>{{count}}</h1> <span><button @click="increment">Increment</button> </div></template><script>export default { computed: { count: function() { return this.$store.state.count; } }, methods: { increment() { //commiting the mutation by passing a value 2 this.$store.commit("INCREMENT_COUNT",2); } }};</script>Now, if we click on the increment button it will increment the count value by 2.
Actions in vuex
In vuex mutations are synchronous so that actions helps us to run asynchronous tasks like making an API request.
Let’s add actions to our vuex store which helps us to make an API request.
Every action function will receive a context object as its parameter by using this we can commit the mutations directly from the actions and also we can access the state.
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export const store = new Vuex.Store({ state: { count: 0, todo: null }, mutations: { INCREMENT_COUNT(state, value) { state.count += value }, SET_TODO(state, data) { state.todo = data } }, actions: { getTodo(context) { fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(firstTodo => { context.commit('SET_TODO', firstTodo) }) } }});Dispatching actions
To invoke the actions inside vue components we need to use this.$store.dispatch method.
<template> <div id="app"> <h1>{{count}}</h1> <button @click="increment">Increment</button> <hr> <span><button @click="getTodo">Get todo</button> <ul> <li v-for="(value,key) in todo" :key="key">{{value}}</li> </ul> </div></template><script>export default { computed: { count: function() { return this.$store.state.count; }, todo: function() { return this.$store.state.todo; } }, methods: { increment() { this.$store.commit("INCREMENT_COUNT", 2); }, getTodo() { this.$store.dispatch("getTodo"); } }};</script>Hope this code and post will helped you for implement Vue State Management tutorial using Vuex. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs