Несколько простых, но полезных советов по работе с геттерами в Vuex

Vuex предоставляет удобные инструменты для работы с данными, но некоторые разработчики используют их не всегда по назначению, либо создают избыточные конструкции там, где можно было написать более понятно и ёмко, такое также случается, когда разработчик только знакомится с данными инструментами. В данной статье будут приведены некоторые рекомендации по организации геттеров (Getters), которые вы сможете применить в работе.

Геттеры являются частью хранилища Vuex, вычисляемыми свойствами, если точнее. Они позволяют получать например отфильтрованные по какому-либо параметру данные. Но некоторые разработчики понимают название этого инструмента буквально и начинают использовать это, как замену получения данных напрямую из state. Отсюда вытекает первая ошибка использования геттеров.

Использование геттеров для простого получения данных из хранилища

Давайте разберем простой пример кода:

state: {   films: [     { id: 1, name: 'Джеймс Бонд' },     { id: 2, name: 'Гарри Поттер' },     { id: 3, name: 'Автострада 60' },   ], }, getters: {   films: state => state.films, },

Такое использование геттеров встречается достаточно часто и это плохо. Для доступа к состоянию в вашем компоненте достаточно сделать вычисляемое значение в computed, например:

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

Либо еще более удобный вариант с использованием mapState:

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

Возьмите на вооружение такой способ получения данных, тогда вы не будет перегружать свой код лишним кодом.

ИМХО: многие миксуют использовние mapState и создание вычисляемых значений, возвращающих состояние. Для создания единообразного кода используйте mapState и остальные инструменты даже для одного значения, так как ваш код станет более единообразным и в него можно будет вносить изменения гораздо быстрее и добнее, к примеру если придется вывести еще одно знанчение.

Создавать геттер для единственного случая использования фильтра

Предположим, что вам нужно получить фильм про Джеймса Бонда, для какого-то специфического случае, возможно вам захочется сделать так:

getters: {   bondFilm: (state) => {     const [film = {}] = state.films       .filter(f => f.name === 'Джеймс Бонд');     return film;   }, },

Не нужно так поступать, лучше снова обратиться к mapState и сделать следующим образом:

computed: {   ...mapState({     bondFilm: (state) => {     const [film = {}] = state.films       .filter(f => f.name === 'Джеймс Бонд');     return film;   },   }), },

По сути вы просто переносите специфический фильтр в ваш компонент, где он необходим, пример весьма абстрактный, но я часто встречал его на практике.

Создавать геттеры с параметрами

Даннный способ работы с геттерами весьма удобен и часто встречается, но нельзя забывать, что геттеры являются вычисляемыми свойствами и кэшируются. Это не значит, что использовать это нельзя вовсе, но лучше лишний раз подумайте, нельзя ли иначе. Взгляните на пример:

getters: {   filmById: (state) => (id) => {     const [film = {}] = state.films       .filter(f => f.id === id);     return film;   }, },

Дело в том, что таким вызовом вы как бы говорите, что вам необходимо каждый раз по новой вычислять результат геттера, а затем отдать его вам. Если возникает необходимость собрать данную структуру, то можно сделать наприме так:

getters: {   filmsById: state => state.films     .reduce((result, film) => ({       ...result,       [film.id]: film,     }), {}), },

В данном случае повторное вычисление произойдет только в случае изменения данных, а вы сможете обращаться к id, как к ключам объекта.

Подведем небольшой итог

• Не используйте геттеры для простого получения данных, не нужно усложнять свой код обертками для простых операций
• Не создавайте геттреры для специфических фильтров, которые будет необходимы только однажды, основная идея геттеров — это получение производных состояний, но не нужно переносить логику компонента в логику хранилища
• Параметризированные геттеры теряют своё основное свойство — кэшируемость, подумайте несколько раз, прежде чем пользоваться ими таким способом
• Пользуйтесь всеми преимуществами mapState, помните, что большую часть специфических задач для компонента можно выполнить с его помощью
• Используйте mapGetters, об этом было сказано косвенно, но единообразие лучше, чем его отсутствие

Данная статья написана для начинающихся и запутавшихся разработчиков, если вы еще не открывали документацию по Vue и Vuex, а первым делом пошли смотреть информацию по вопросу на хабре, то перейдите по ссылкам выше и начните читать с них, используйте советы из различных источников после этого.