Quick guide to Vuex
Tags: javascript, vue, vuex
Published: 2019-03-15 21:34:06

---
title: Quick guide to Vuex
published: true
description: 
tags: javascript, vue, vuex
---

![](https://thepracticaldev.s3.amazonaws.com/i/eaq24yis2zpben743veo.png)

Vuex is a package developed to manage the state of data in Vue app. In other words,  Vuex manages all the data we ever needed inside our app.


## Prerequisites
- Basic understanding of Vue
- Basic understanding of REST API


## What is Vuex? 


> 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.


## Why should you use it?


- Best practices 
- Single data centralization
- DRY (Don't repeat yourself)
- Easier to maintain and modify existing code


![](https://thepracticaldev.s3.amazonaws.com/i/8awcjj907dalay1uw4er.jpeg)



## How? 

This simple illustration would make you have a thought on Vuex.

Let's say you have an app that calls endpoints for CRUD (Create, Read, Update, Delete) Operations,Remember the conventional method is using the endpoint directly into your app with **axios** or **fetch** then you get a response and move on, 

But what if we need to call the same endpoint on another page,  that's where Vuex comes in, the conventional method would literally make the request twice but with Vuex; The data would be stored from the first instance in a state which can be later used several times on other views or components. 


## Vuex Common Terminology

Vuex contains a few terms which can be confusing; they include:


![](https://thepracticaldev.s3.amazonaws.com/i/l769al4al16dq4mq5oth.jpeg)


- Getters
- Mutation
- Action
- State
- MapState 

**State:**  This is a JavaScript object containing a list of variables that are used to handle responses from mutation

```javascript

state: {
  users: [],
  blogs: [],
}
```

**Getters:** This is used to filter data in a particular state

```javascript


findBlogById: (state, getters) => (id) => {
  return state.blogs.find(blog => blog.id == id);
}
```

**Action:** This is used to make a request using axios or fetch, just like the conventional method. 

```javascript

axios.get('/api/blog')
.then(res => {
   commit("LOAD_BLOGS", res.data)
})
```

**MapState:** this is used in Vue computed property such that the state needed can be accessible in template/view. 

```javascript

computed: {
  ...mapState(['blogs']),
}

//OR 

computed: mapState(['blogs']),

```

```vue
<div v-if="blogs">
   <div v-for="(value, index) of blogs">
      <h1> {{value.title}} </h1>
      <p> {{value.body}} </p>
   </div>
</div>

```

**Mutation:** These are very similar to events, they allow a state to be modified by the response of the action.

```javascript
//fetching blogs

LOAD_BLOGS(state, blogFromAction) {
   state.blogs = blogFromAction
}
```

```javascript
//adding new blog

ADD_BLOG(state, payloadFromForm) {
    state.blogs.unshift(payloadFromForm);
}
```

![](https://thepracticaldev.s3.amazonaws.com/i/3voad8jzvq3xbeigwncs.jpeg)

## But I still don't understand 

In case you still don't understand, Here is a [link](https://github.com/iamhabbeboy/quick-guide-to-vuex) to a simple blog that uses _https://jsonplaceholder.typicode.com_ as endpoints.


### Thanks ❤️