web-dev-qa-db-fra.com

vue & vuex getter vs passage de l'état via des accessoires

J'ai vu beaucoup de gens conseiller de passer l'état aux composants via des accessoires plutôt que d'accéder à l'état vue directement à l'intérieur du composant afin de le rendre plus réutilisable.

Cependant, si je fais cela de manière cohérente, cela signifierait que seul le composant racine des routes communiquerait avec le magasin et toutes les données doivent être transmises à travers la hiérarchie imbriquée afin d'obtenir le composant final. Il semble que cela causerait facilement un gâchis:

Dashboard
   Profile
   Billing
      History
      CreditCards
         CreditCard

Comment charger des données pour une carte de crédit d'utilisateurs? Dans Dashboard et passez-le tout le long de l'arbre?

vue.jsvuex
18
Chris

Cela causera un gâchis, vous avez raison. C'est l'un des problèmes résolus par vuex.

Alors, comment décidez-vous de passer des accessoires ou d'utiliser vuex? Quand je dis utiliser vuex, je veux accéder aux données du magasin directement depuis le composant qui en a besoin. L'astuce consiste à considérer la relation de chaque élément de données avec l'application globale.

Les données qui sont utilisées à plusieurs reprises tout au long de la page, dans de nombreuses hiérarchies DOM, dans différentes pages, etc., sont le cas idéal pour utiliser vuex.

D'un autre côté, certains composants sont si étroitement couplés que le passage des accessoires est la solution évidente. Par exemple, vous avez un list-container, dont l'enfant direct est le composant list, et les deux ont besoin des mêmes données de liste. Dans cette situation, je transmettrais les données de la liste au composant list comme accessoire.

Vous pouvez être intéressé par la propriété d'instance $attrs

https://vuejs.org/v2/api/#vm-attrs

avec son option frère inheritAttrs.

https://vuejs.org/v2/api/#inheritAttrs

L'utilisation de ces 2 en combinaison vous permet de transmettre des accessoires sur plusieurs niveaux de composants avec moins de code passe-partout.

22
Eric Guan

Chaque composant, quelle que soit sa position dans la hiérarchie, peut communiquer avec le magasin.

A l'intérieur de chaque composant, vous avez accès à l'objet this.$store pour pouvoir envoyer actions, valider des données via mutations ou lire des données via getters

Lire la documentation pour plus de détails:

En fournissant l'option de stockage à l'instance racine, le magasin sera injecté dans tous les composants enfants de la racine et sera disponible sur eux en tant que ceci. $ Store.

const Counter = {
  template: `<div>{{ count }}</div>`,
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
0
LiranC