Why Getters, Mutations, Actions in Vuex Store

Hello, everyone and welcome to my a little blog, I am so happy to present to you like this tutorial my name is Emad Aldeen Mukhtar from Neelain University department of computer science now working at Kashta Lab company.
What I would like to present to you today is a little tip about Vuex Store that I didn’t catch them before. my talk will relevant to those of you who need to learn or implement the vuex store into their vueJs Application. I have divided my blog into three parts, first of all, I will begin with the importance of Getters then I will move on why we use Mutation and last do we need to use Actions.

Do we need to use Vuex Store in our vueJs Applications?

Of course, we need As official documentation 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 predictably. It also integrates with Vue’s official dev tools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.

Source: https://vuex.vuejs.org.

Firstly what are Getters and why do we use it?

It is a way to organize your code and make it clean, how is it? okay sometimes as you know in your component you will use a computed property to use state of the store and you do some stuff with state of the store to achieve it, for example, let us say we need to a calculation for todo as done

Okay this is good, and say we need to use it in other components what can we do? we have two choices either repeated our function or put it into a separated file and imported in multiple components, both of them are less than ideal.

Here is the thing vuex allow us to defined “getters” in the store and then call the function inside getter in any component you need without duplicate.

And then you will use it in your component like this :

In this way, you will be able to use your function in any place and make your code clean.

Second: Why we use “mutation”?

The only way to change the state in a Vuex store is by committing a mutation. Vuex mutations are very similar to events: each mutation has a string type and a handler. The handler function is where we perform actual state modifications, and it will receive the state as the first argument.

Source: https://vuex.vuejs.org.

Tip: So why we use “mutation” because to track data to appear in DevTool debug this only thing that I think through my experience in Vuex will make your function to debug.

If we use the old way to change the state of a store like this :

So if you tried it and open in DevTool you will not see this function inside DevTool.

So the only way to debug your function of the store you must fallow this :

Finally, I’ll talk about “actions” :

Actions are similar to mutations, the differences being that:

· Instead of mutating the state, actions commit mutations.

· Actions can contain arbitrary asynchronous operations.

Source: https://vuex.vuejs.org.

Why we use “actions” because “actions” synchronize (two things happening at the same time) and “mutation” is a synchronize.

For example :

Then implement in a component like this :

And inside the template :

If you focus your mind and press button “Reduce count” then you will see in Devtool data is changed before a duration we put in.

And this due to the nature of “mutation” it is a synchronize.

So to solve this issue we need to use “actions” to change the store

If implemented this way your data will not change until the duration is an end (Three seconds).

Tips: to deny state changed from outside using this script

Strict: true, so direct change will not be a don (direct change means using commit outside the store)

Conclusion

I think we talk little tips about Vuex Store why we use getters and mutations and actions.
Thankfully, many developers have gone before us and there’s a lot we can learn from their experiences. In this blog, I summarized some of my lessons learned with those of many other developers. Take the time to read the references, don’t assume you already know or understand it all and — above all — push yourself to become a better developer. Being part of a VueJs team is certainly going to be a great help.

Have fun coding!