Vuex fournit des outils pratiques pour travailler avec des données, mais certains développeurs ne les utilisent pas toujours aux fins prévues, ou créent des constructions redondantes où il était possible d'écrire plus clairement et de manière succincte, cela se produit également lorsqu'un développeur ne se familiarise qu'avec ces outils. Cet article fournira quelques directives pour l'organisation des getters que vous pouvez appliquer à votre travail.
Les getters font partie du référentiel Vuex, les propriétés calculées, plus spécifiquement. Ils vous permettent de recevoir, par exemple, des données filtrées par certains paramètres. Mais certains développeurs prennent littéralement le nom de cet outil et commencent à l'utiliser comme un substitut pour obtenir des données directement de l' état . D'ici suit la première erreur d'utiliser des getters.
Utilisation de getters pour récupérer facilement les données du stockage
Regardons un exemple de code simple:
state: { films: [ { id: 1, name: ' ' }, { id: 2, name: ' ' }, { id: 3, name: ' 60' }, ], }, getters: { films: state => state.films, },
Cette utilisation des getters est assez courante et c'est mauvais. Pour accéder à l'état de votre composant, faites simplement une valeur calculée en calcul, par exemple:
computed: { films() { return this.$store.state.films; }, },
Ou une option encore plus pratique en utilisant mapState:
computed: { ...mapState(['films']), },
Adoptez une telle méthode pour obtenir des données, vous ne surchargerez pas votre code avec du code superflu.
À mon humble avis: beaucoup se mélangent en utilisant mapState et en créant des valeurs calculées qui renvoient un état. Pour créer un code uniforme, utilisez mapState et les autres outils même pour une valeur, car votre code deviendra plus uniforme et vous pourrez apporter des modifications beaucoup plus rapidement et plus facilement, par exemple, si vous devez afficher une valeur de plus.
Créer un getter pour un filtre de cas d'utilisation unique
Supposons que vous ayez besoin d'obtenir un film de James Bond, pour certains cas spécifiques, vous pouvez le faire:
getters: { bondFilm: state => state.films .find(f => f.name === ' ') || {}, },
Pas besoin de le faire, il est préférable de se tourner à nouveau vers mapState et de procéder comme suit:
computed: { ...mapState({ bondFilm: state => state.films .find(f => f.name === ' ') || {}, }), },
En fait, vous transférez simplement un filtre spécifique à votre composant là où il est nécessaire, l'exemple est très abstrait, mais je l'ai souvent rencontré en pratique.
Créer des getters avec des paramètres
Cette façon de travailler avec les getters est très pratique et courante, mais il ne faut pas oublier que les getters sont des propriétés calculées et mises en cache. Cela ne signifie pas que vous ne pouvez pas l'utiliser du tout, mais il vaut mieux réfléchir à nouveau si c'est le cas. Jetez un oeil à un exemple:
getters: { filmById: state => id => state.films .find(film => film.id === id) || {}, },
Le fait est qu'avec un tel appel, vous dites en quelque sorte que vous devez à chaque fois recalculer le résultat du getter, puis vous le donner. S'il est nécessaire d'assembler cette structure, vous pouvez faire quelque chose comme ceci:
getters: { filmsById: (state) => { const result = {}; state.films.forEach((film) => { result[film.id] = film; }); return result; }, },
Dans ce cas, le recalcul ne se produira qu'en cas de modification des données, et vous pouvez faire référence à id comme clés de l'objet.
Pour résumer
- N'utilisez pas de getters pour une récupération de données simple, pas besoin de compliquer votre code avec des wrappers pour des opérations simples
- Ne créez pas de getters pour des filtres spécifiques qui ne seront nécessaires qu'une seule fois, l'idée principale des getters est d'obtenir des états dérivés, mais vous n'avez pas besoin de transférer la logique du composant vers la logique de stockage
- Les getters paramétrés perdent leur propriété principale - la mise en cache, réfléchissez quelques fois avant de les utiliser de cette façon
- Tirez pleinement parti de mapState, n'oubliez pas que la plupart des tâches spécifiques d'un composant peuvent être effectuées à l'aide de celui-ci
- Utilisez mapGetters, cela a été dit indirectement, mais l'uniformité vaut mieux que de ne pas l'avoir
Cet article est écrit pour les développeurs débutants et confus, si vous n'avez pas encore ouvert la documentation de Vue et Vuex , et la première chose que vous avez regardée les informations sur le problème sur le hub, puis suivez les liens ci-dessus et commencez à lire à partir d'eux, utilisez des conseils de diverses sources après cela.