Vuex - utilisation excessive de getters dans l'application. Erreur d'analyse

Cet article abordera une erreur courante que la plupart des débutants commettent lors du développement d'une application sur Vue + Vuex. Nous parlerons des getters et comment les utiliser correctement. Nous examinerons également les fonctions d'assistance mapState et mapGetters.

Avant de lire: Il est recommandé d'avoir une connaissance de base de Vue et Vuex.

Chapitre 1. Que sont les getters. Exemple d'utilisation inappropriée

Les accesseurs font partie du référentiel Vuex qui renvoie des données calculées sur l'état actuel du référentiel à nos composants.

Prenons un exemple:

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

Cela ressemblera à un composant avec une liste de tous les livres:

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

L'exemple ci-dessus fonctionne, mais cela n'en vaut pas la peine. Avec cette approche, nous surchargeons l'application.

Si vous avez besoin de sortir des données directement du stockage vers le composant sans aucune modification, les getters ne sont pas la meilleure solution. Ensuite, je vais montrer comment vous pouvez améliorer le code et vous débarrasser de l'utilisation inappropriée des getters.

Chapitre 2. Utilisation de mapState pour récupérer des données du stockage

La documentation se lit comme suit:

Lorsqu'un composant doit utiliser plusieurs propriétés ou getters d'entrepôt, déclarer toutes ces propriétés calculées peut être fastidieux. Dans de tels cas, vous pouvez utiliser la fonction mapState , qui génère automatiquement des propriétés calculées.

Revenons à notre composant et utilisons mapState au lieu d'un getter:

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

Un getter du référentiel peut être supprimé, car on n'a plus besoin de lui:

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

Beaucoup plus pratique, non? Nous nous sommes débarrassés des getters inutiles et avons réduit la quantité de code.

Chapitre 3. Pourquoi les getters, s'il y a mapState

Et pourtant, ils sont nécessaires. Les getters sont utilisés dans les cas où vous devez afficher des informations modifiées à partir du référentiel (par exemple, une liste de tous les livres lus ).

Créons un getter pour lire tous les livres du référentiel:

 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); } } }); 

Maintenant, notre composant ressemblera à ceci:

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

On pourrait s'arrêter à cela, mais il y a encore une chose utile à savoir. Si vous devez réutiliser le même getter dans différents composants, il peut ne pas être très pratique d'écrire des getters à chaque fois dans la méthode calculée. MapGetters vient à la rescousse .

Regardons un exemple:

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

L'amélioration est évidente: en utilisant mapGetters, nous avons réduit la quantité de code.

Vous pouvez également calculer des informations à partir du référentiel sur la base de certaines données, par exemple, obtenir un livre par son identifiant ou son nom. Ceci peut être réalisé en passant un argument à notre 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) } } } 

Fixation du matériau

• Utilisez des getters lorsque vous devez afficher des informations modifiées à partir du référentiel (par exemple, une liste de tous les livres lus), dans d'autres cas, utilisez la fonction auxiliaire mapState.
• Les accesseurs peuvent recevoir des arguments supplémentaires pour calculer les données en fonction d'eux.
• Les meilleurs résultats sont mis à jour lorsque l'une des dépendances change.

Documentation Getter en russe

Exemple d'application d'un article sur codepen