DEV Community

Quick guide to Vuex

Azeez Abiodun Solomon on March 15, 2019

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. ...
Collapse
 
itachiuchiha profile image
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.

Collapse
 
daradedesign profile image
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.