Vuex - uso excessivo de getters na aplicação. Erro ao analisar

Este artigo discutirá um erro comum que a maioria dos iniciantes comete ao desenvolver um aplicativo no Vue + Vuex. Vamos falar sobre getters e como usá-los corretamente. Também veremos as funções auxiliares mapState e mapGetters.

Antes de ler: É recomendável que você tenha um conhecimento básico do Vue e Vuex.

Capítulo 1. O que são getters. Exemplo de uso inadequado

Os getters fazem parte do repositório Vuex que retorna dados computados sobre o estado atual do repositório para nossos componentes.

Considere um exemplo:

const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     books: state => state.books } }); 

Isso parecerá um componente com uma lista de todos os livros:

 export default { computed: { //   books() { return this.$store.getters.books } } } 

O exemplo acima funciona, mas não vale a pena. Com essa abordagem, sobrecarregamos o aplicativo.

Se você precisar enviar dados diretamente do armazenamento para o componente sem nenhuma modificação, os getters não são a melhor solução. A seguir, mostrarei como você pode melhorar o código e se livrar do uso inadequado de getters.

Capítulo 2. Usando o mapState para recuperar dados do armazenamento

A documentação diz:

Quando um componente precisa usar muitas propriedades ou getters de armazém, declarar todas essas propriedades calculadas pode ser entediante. Nesses casos, você pode usar a função mapState , que gera automaticamente propriedades calculadas.

Vamos voltar ao nosso componente e usar o mapState em vez de um getter:

 import { mapState } from 'vuex'; export default { computed: { ...mapState([ 'books' ]) } } 

Um getter do repositório pode ser excluído porque não precisamos mais dele:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] } }); 

Muito mais conveniente, certo? Nos livramos de getters desnecessários e reduzimos a quantidade de código.

Capítulo 3. Por que getters, se houver mapState

E ainda são necessários. Os getters são usados ​​nos casos em que você precisa exibir informações modificadas do repositório (por exemplo, uma lista de todos os livros lidos ).

Vamos criar um getter para ler todos os livros do repositório:

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); } } }); 

Agora, nosso componente ficará assim:

 import { mapState } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //     finishedBooks() { return this.$store.getters.finishedBooks } } } 

Pode-se parar com isso, mas há mais uma coisa útil que vale a pena conhecer. Se você precisar reutilizar o mesmo getter em componentes diferentes, pode não ser muito conveniente escrever getters sempre no método calculado. O MapGetters vem em socorro .

Vejamos um exemplo:

 //     import { mapState, mapGetters } from 'vuex'; export default { computed: { //     ...mapState([ 'books' ]), //   ,   //       ...mapGetters([ 'finishedBooks' ]) } } 

A melhoria é óbvia: usando mapGetters, reduzimos a quantidade de código.

Você também pode calcular informações do repositório com base em alguns dados, por exemplo, obter um livro por seu ID ou nome. Isso pode ser conseguido passando um argumento para o nosso getter.

 const store = new Vuex.Store({ state: { //   books: [ { id: 1, title: '...', finished: true }, { id: 2, title: '...', finished: false } ] }, getters: { //     finishedBooks: state => { return state.books.filter(books => books.finished); }, //    id getBookById: (state) => (id) => { return state.books.find(books => books.id === id) } } }); 

 import { mapState, mapGetters } from 'vuex'; export default { computed: { ...mapState([ 'books' ]), ...mapGetters([ 'finishedBooks', 'getBookById' ]), getBook() { //    id === this.id return this.getBookById(this.id) } } } 

Fixação do material

• Use getters quando precisar exibir informações modificadas do repositório (por exemplo, uma lista de todos os livros lidos); em outros casos, use a função auxiliar mapState.
• Os getters podem receber argumentos adicionais para calcular dados com base neles.
• Os resultados do Getter são atualizados quando uma das dependências é alterada.

Documentação Getter em russo

Exemplo de aplicação de um artigo no codepen