Quick guide to Vuex

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

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:

• Getters
• Mutation
• Action
• State
• MapState

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

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

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

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.

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.

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

//OR 

computed: mapState(['blogs']),

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

//fetching blogs

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

//adding new blog

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

But I still don't understand

In case you still don't understand, Here is a link to a simple blog that uses https://jsonplaceholder.typicode.com as endpoints.

Thanks ❤️

Comments

[Itachi Uchiha]

Thanks. I'm using Vuex in my all projects even if they so basic.

But there is a thing I don't like it. Mutations and actions are the same. If you're using actions, mutations' behavior is like a mediator.

For example;

mutations: {
   FILL_SPELLS(state, spells) {
      state.spells = spells
   }
},
actions: {
   fillSpells(ctx, spells) {
      ctx.commit('FILL_SPELLS', spells)
   }
}

I don't like this. But, Vuex's usage is easier than other equivalents.

[Dallas DeGrendel]

Hi Ali,

They are not the same... and I'll explain why.

A mutation changes the state. This is where you increment and decrement stuff on the beginner tutorials. These changes are immediate.

An action is an asynchronous function. If you called a complicated vuex action, and it takes a long time to finish, it isn't preventing other components from changing the state, or calling getters.

Think of a mutation as something that is simple and there to change the state of that store. An action is where you make your HTTP Requests, prepare data for the request or the store, and the place you can call other Asynchronous methods. This also can return a promise.