Some simple but useful tips for working with getters in Vuex

Vuex provides convenient tools for working with data, but some developers do not always use them for their intended purpose, or they create redundant constructions where it was possible to write more clearly and succinctly; this also happens when the developer is only familiar with these tools. This article will give some recommendations on the organization of getters ( Getters ), which you can apply in your work.

Getters are part of the Vuex storage, calculated properties, to be more precise. They allow you to receive, for example, data filtered by any parameter. But some developers understand the name of this tool literally and begin to use it as a replacement for receiving data directly from the state . This implies the first error in the use of getters.

Using getters to easily retrieve data from storage

Let's take a simple code example:

state: { films: [ { id: 1, name: ' ' }, { id: 2, name: ' ' }, { id: 3, name: ' 60' }, ], }, getters: { films: state => state.films, }, 

Such use of getters is quite common and this is bad. To access the state in your component, it is enough to make a computed value in the computed, for example:

 computed: { films() { return this.$store.state.films; }, }, 

Or an even more convenient option using mapState:

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

Adopt this method of obtaining data, then you will not overload your code with excess code.

IMHO: many mix the use of mapState and the creation of calculated values ​​that return a state. To create a uniform code, use mapState and other tools for even one value, since your code will become more uniform and you can make changes to it much faster and more conveniently, for example, if you have to output another value.

Create a getter for a single filter use.

Suppose you need to get a James Bond movie, for some particular case, you might want to do this:

 getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, }, 

No need to do so, it is better to again refer to mapState and do as follows:

 computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), }, 

In fact, you simply transfer a specific filter to your component, where it is needed, a very abstract example, but I often met it in practice.

Create getters with parameters

This way of working with getters is very convenient and often occurs, but we must not forget that getters are calculated properties and are cached. This does not mean that it can not be used at all, but it is better to once again think whether it is impossible otherwise. Take a look at an example:

 getters: { filmById: state => id => state.films .find(film => film.id === id) || {}, }, 

The fact is that with such a challenge you kind of say that it is necessary for you to calculate the getter result each time over a new one, and then give it to you. If there is a need to assemble this structure, you can do it like this:

 getters: { filmsById: (state) => { const result = {}; state.films.forEach((film) => { result[film.id] = film; }); return result; }, }, 

In this case, the recalculation will occur only if the data changes, and you will be able to refer to id as to the keys of the object.

Let's summarize a little

• Do not use getters for simple data retrieval, no need to complicate your code with wrappers for simple operations
• Do not create getters for specific filters that will be needed only once, the main idea of ​​getters is to obtain derived states, but you don’t need to transfer the component logic to the storage logic
• Parameterized getters lose their main property - cacheability, think a few times before using them this way.
• Take full advantage of mapState, remember that most of the specific tasks for a component can be performed with it.
• Use mapGetters, this was said indirectly, but uniformity is better than not.

This article is written for beginning and confused developers, if you have not opened the documentation for Vue and Vuex , and first went to see information on the issue on Habré, then follow the links above and start reading from them, use tips from various sources after that.