Getting started with Vuex

Muhammad Lahin
Aug 27, 2017 · 4 min read

We are going to explore Vuex.

What is Vuex? Why do we need it?

It is a State Management for vue.js. Suppose you have more than one component and you want to pass same data in each component, you can make http request in all components by axios or anything. But you can do it better by vuex. Make a single file and call your http request there, then we can call this from each component. It gives us the power of reusability.

If you are making a big scale app vuex can help you a lot.

There are four essential parts for vuex. state, getters, mutations, actions. Now we will use this four to make a todo app. We will include details of everyone.

We need to install vuex locally.

npm i --save vuex

First let’s make a file ‘store.js’ inside the src folder.

Import vue and vuex in ‘store.js’ file.

// store.jsimport Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

Then make a const variable ‘store’, all of our operations we will do inside the ‘store’ variable as a ‘vuex’ object. You can see todoDetails array inside state property. All of our initial state we need to define inside this ‘state’ property. This is what the ‘state’ can do for us to take our initial array/variale.

In ‘todoDetails’ array we will save every todo.

// store.jsexport const store = new Vuex.Store({    
state: {
todoDetails: []
},
)}

Now let’s make getters. In order to get the data from the state we need to make getters. Inside getters we make a function which automatically takes whole state as a parameter, then we can return the ‘todoDetails’ from the state.

// store.jsgetters: {        
getAllTodoDetails(state) {
return state.todoDetails;
}
}

mutations, we will use it for add, delete etc operations. Inside the mutations we make a function to add our todo inside the ‘todoDetails’ array.

The function we make to add our todo is ‘ addTodo’ which can take two parameters ‘state’(it will help to use ‘todoDetails’) and ‘text’. ‘text’ is our actual todo.

Just like the add operation we can make our delete operation inside the ‘deleteTodo’ function, which is also can take two parameters one is the whole ‘state’(automatically) and another one is ‘todo’ which is nothing but the index of our desired todo to delete.

// store.jsmutations: {        
addTodo(state, text) {
const newTodo = {
content: text
}
state.todoDetails.push(newTodo);
},
deleteTodo(state, todo) {
state.todoDetails.splice(
state.todoDetails.indexOf(todo),1
)
}
}

The only thing left, actions. When we pass the ‘todo’ from a component to ‘store’ of ‘vuex’ in order to add, we can call ‘actions’ from the component. The function inside of the actions will call the function of mutations, the benefit of using ‘actions’ is we can make asynchronous call.

The ‘addTodoActions’ function takes two parameters one is ‘data’ another one is ‘text’(this is the actual todo to add or delete). Then we commit the addTodo mutations with ‘text’ as a parameter with 1sec delaying. Commit means nothing but to call the function of mutations.

// store.jsactions: {      
addTodoActions(data, text) {
setTimeout(()=>{
data.commit('addTodo', text)
}, 1000);
}
}

We need to register our store file into our main.js.

// main.jsimport Vue from 'vue'
import App from './App.vue'
import { store } from './store'

new Vue({
el: '#app',
store,
render: h => h(App)
})

This is all of our complete process of vuex. Now how can we communicate this store file from any component?

I made two components InputBox, TodoList. In InputBox component after writing something in the input field then it will go to the method onSubmit with x(which is nothing but the actual todo) and dispatch(call) the addTodoActions(which we defined as an action in our store) with passing x as an argument. Then action addTodoActions do rest of the work to add the todo(which we discussed in the begining).

// InputBox.vuemethods: {        
onSubmit(x) {
this.$store.dispatch('addTodoActions', x);
}
}

So the adding part is done. Now deleting part.

In the TodoList component inside the computed property we make todos as a function to get all todos from the store of vuex. Which will go to the store and call the getAllTodoDetails getters.

// TodoList.vuecomputed: {        
todos() {
return this.$store.getters.getAllTodoDetails;
}
}

Our template should be like this

// TodoList.vue<div v-for="todo in todos" class="todoLists">            
<h4>{{ todo.content }} <span class="label label-danger" @click="deleteTodoFun(todo)">Delete</span></h4>
</div>

If we click a todo it will go to the deleteTodoFun function with the actual todo you clicked. Inside the deleteTodoFun function we can commit(call) deleteTodo mutations with todo as an argument.

// TodoList.vuemethods: {        
deleteTodoFun(todo) {
this.$store.commit('deleteTodo', todo);
}
}

Our todo app is done.

Get the whole code: https://github.com/lahin31/todo-app-vuex

Official repo: https://github.com/vuejs/vuex

)

Muhammad Lahin

Written by

WEB Enthusiast! My new Blog https://codemacaw.com/

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade