CODEWITHSUNDEEP
vue.jsvuex
DustBG
DustBG

Reputation: 55

Why should I use getters and mutations instead if getting/setting value direct?

What is the difference between:

this.currentLanguage = this.$store.getters.currentLanguage;

and this for getters:

this.currentLanguage = this.$store.state.currentLanguage;

Also this:

this.$store.commit('setLanguages', this.languages);

is gives me same results with this in mutations :

this.$store.state.languages = this.languages;

I'm receiving what I want in both cases. And getting value direct is easier because I don't need to write getter/mutation. Why should I use getters/mutations?

Upvotes: 3

Views: 955

Answers (3)

DominikAngerer
DominikAngerer

Reputation: 6530

That question got answered pretty well by the Vuex Docs itself:

Again, the reason we are committing a mutation instead of changing store.state.count directly, is because we want to explicitly track it. This simple convention makes your intention more explicit, so that you can reason about state changes in your app better when reading the code. In addition, this gives us the opportunity to implement tools that can log every mutation, take state snapshots, or even perform time travel debugging. https://vuex.vuejs.org/guide/ - nearly bottom

So basically the idea is to explicitly track changes. This allows other tools to attach themself to those mutations and actions and track your code which is a huge benefit for large scale applications. It will also make your code more readable and at a later stage much easier to update. Ever read into an old project where they always changed on the go without one "way" to do it - it won't happen here.

Upvotes: 2

Bill Criswell
Bill Criswell

Reputation: 32941

When you use mutations you have a clear record of what changed in things like vue-devtools. It also allows for time travel debugging.

enter image description here

This is really nice when you're debugging.

The state vs getters is a lot more of a gray area. I personally like not having to think if something is in state or a getter. If I need to get something from the store I use a getter.

Upvotes: 3

LShapz
LShapz

Reputation: 1766

you do not need to use getters in this case. getters are like computed properties on a regular Vue component, so you only need them when the data is a more complex descendant of the other data.

you want to use mutations, however, because even if it looks like the this.$store.state.languages = this.languages is working, it isn't necessarily updating it correctly. if you have other components depending on the store, it may not receive the new data because it hasn't undergone the full mutation process.

Upvotes: 4

Related Questions