O Vuex fornece ferramentas convenientes para trabalhar com dados, mas alguns desenvolvedores nem sempre os usam para os propósitos pretendidos, ou criam construções redundantes onde era possível escrever de forma mais clara e sucinta, isso também acontece quando um desenvolvedor apenas se familiariza com essas ferramentas. Este artigo fornecerá algumas diretrizes para organizar getters que você pode aplicar ao seu trabalho.
Os getters fazem parte do repositório Vuex, propriedades calculadas, mais especificamente. Eles permitem que você receba, por exemplo, dados filtrados por algum parâmetro. Mas alguns desenvolvedores pegam o nome dessa ferramenta literalmente e começam a usá-la como um substituto para obter dados diretamente do estado . A partir daqui segue o primeiro erro de usar getters.
Usando getters para recuperar facilmente dados do armazenamento
Vejamos um exemplo de código simples:
state: { films: [ { id: 1, name: ' ' }, { id: 2, name: ' ' }, { id: 3, name: ' 60' }, ], }, getters: { films: state => state.films, },
Esse uso de getters é bastante comum e isso é ruim. Para acessar o estado em seu componente, basta fazer um valor calculado em computado, por exemplo:
computed: { films() { return this.$store.state.films; }, },
Ou uma opção ainda mais conveniente usando o mapState:
computed: { ...mapState(['films']), },
Adote esse método de obtenção de dados, para não sobrecarregar seu código com código supérfluo.
IMHO: muitos se misturam usando o mapState e criando valores calculados que retornam um estado. Para criar um código uniforme, use mapState e o restante das ferramentas, mesmo para um valor, pois seu código se tornará mais uniforme e você poderá fazer alterações com muito mais rapidez e conveniência, por exemplo, se precisar exibir mais um valor.
Crie um getter para um único filtro de caso de uso
Suponha que você precise obter um filme de James Bond. Em alguns casos específicos, convém fazer o seguinte:
getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, },
Não é necessário fazer isso, é melhor voltar ao mapState novamente e fazer o seguinte:
computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), },
De fato, você simplesmente transfere um filtro específico para o seu componente onde é necessário, o exemplo é muito abstrato, mas eu o encontrei na prática.
Criar getters com parâmetros
Essa maneira de trabalhar com getters é muito conveniente e comum, mas não devemos esquecer que os getters são propriedades calculadas e armazenadas em cache. Isso não significa que você não possa usá-lo, mas é melhor pensar novamente se poderia ser de outra forma. Veja um exemplo:
getters: { filmById: state => id => state.films .find(film => film.id === id) || {}, },
O fato é que, com essa ligação, você meio que diz que precisa recalcular o resultado do getter a cada vez e depois o entrega a você. Se houver necessidade de montar essa estrutura, você poderá fazer algo assim:
getters: { filmsById: (state) => { const result = {}; state.films.forEach((film) => { result[film.id] = film; }); return result; }, },
Nesse caso, o recálculo ocorrerá apenas no caso de alterações de dados e você poderá se referir ao id como chaves do objeto.
Resumir
- Não use getters para recuperação simples de dados, não há necessidade de complicar seu código com wrappers para operações simples
- Não crie getters para filtros específicos que serão necessários apenas uma vez; a principal idéia dos getters é obter estados derivados, mas você não precisa transferir a lógica do componente para a lógica de armazenamento.
- Os getters parametrizados perdem sua propriedade principal - cacheability, pense algumas vezes antes de usá-los dessa maneira
- Aproveite ao máximo o mapState, lembre-se de que a maioria das tarefas específicas de um componente pode ser executada usando-o
- Use mapGetters, isso foi dito indiretamente, mas a uniformidade é melhor do que não tê-la
Este artigo foi escrito para desenvolvedores iniciantes e confusos, se você ainda não abriu a documentação para o Vue e o Vuex e a primeira coisa que analisou nas informações sobre o problema no hub, siga os links acima e comece a ler com eles, use dicas de várias fontes depois disso.