Comment passer des données entre les composants dans Vue.js

Le partage de données entre les composants est l'une des fonctionnalités principales de VueJS. Il vous permet de concevoir un projet plus modulaire, de contrôler les étendues de données et de créer un flux naturel de données à travers votre application.

À moins que vous ne créiez l'intégralité de votre application Vue dans un seul composant (ce qui n'aurait aucun sens), vous allez rencontrer des situations où vous devez partager des données entre les composants.

À la fin de ce didacticiel, vous saurez trois façons de le faire.

D'accord, allons-y!

1. Utilisation d'accessoires pour partager des données du parent à l'enfant

Les accessoires VueJS sont le moyen le plus simple de partager des données entre les composants. Les accessoires sont des attributs personnalisés que nous pouvons attribuer à un composant. Ensuite, dans notre modèle, nous pouvons donner ces valeurs d'attributs et – BAM – nous transmettons des données d'un parent à un composant enfant!

Par exemple, disons que nous travaillons sur une page de profil utilisateur et que nous voulons avoir un composant enfant accepte un accessoire de nom d'utilisateur. Nous aurons besoin de deux composants.

1. Le composant enfant acceptant l'hélice, appelons cela AccountInfo.vue .
2. Le composant parent passant l'hélice, appelons cela ProfilePage.vue .

Dans AccountInfo.vue nous pouvons déclarer les accessoires qu'il accepte en utilisant l'option accessoires. Donc, à l'intérieur des options du composant, faisons en sorte qu'il ressemble à ceci.

 // AccountInfo.vue

 

Ensuite, pour réellement transmettre les données du parent ( ProfilePage.vue ), nous les transmettons comme un attribut personnalisé.

 // ProfilePage.vue
 

Maintenant, si nous chargeons notre page, nous pouvons voir que notre AccountInfo rend correctement la valeur transmise par son parent.

Comme lorsque nous travaillons avec d'autres directives VueJS, nous pouvons utiliser v-bind pour passer dynamiquement des accessoires. Par exemple, supposons que nous voulons définir le nom d'utilisateur prop pour qu'il soit égal à une variable. Nous pouvons accomplir cela en utilisant un raccourci pour la directive v-bind (ou simplement : pour faire court). Le code ressemblerait un peu à ceci:

Cela signifie que nous pouvons modifier nos données et que tout accessoire enfant utilisant cette valeur sera également mis à jour.

Conseil: vérifiez toujours vos accessoires

Si vous cherchez à écrire un code Vue plus clair, une technique importante est pour vérifier vos accessoires. En bref, cela signifie que vous devez spécifier les exigences pour votre accessoire (c'est-à-dire le type, le format, etc.). Si l'une de ces conditions n'est pas remplie (par exemple, si l'hélice est passée d'un type incorrect), Vue affichera un avertissement.

Disons que nous voulons que notre accessoire de nom d'utilisateur accepte uniquement les chaînes. Nous devrions modifier notre objet d'accessoires pour qu'il ressemble à ceci:

 export default {
 accessoires: {
   nom d'utilisateur: String
 }
} 

La vérification des accessoires est essentielle lorsque vous travaillez dans des applications Vue à grande échelle ou lorsque vous concevez des plugins. Il permet de s'assurer que tout le monde est sur la même page et d'utiliser les accessoires comme ils étaient destinés.

Pour une liste complète des vérifications que nous pouvons inclure sur les accessoires, je recommanderais certainement de consulter la documentation officielle pour un in- examen approfondi.

Conseil: respectez les conventions de dénomination des accessoires

Selon le guide de style VueJS, la meilleure façon de nommer vos accessoires est d'utiliser camelCase lorsque vous les déclarez dans votre script et votre casse-kebab lorsque les référencer dans le code du modèle.

Le raisonnement derrière cela est en fait assez simple. En Javascript, camelCase est la convention de dénomination standard et en HTML, c'est le cas du kebab.

Donc, Vue recommande que nous nous en tenions aux normes de chaque langue. Heureusement, Vue est capable de convertir automatiquement entre les deux styles, il n'y a donc pas de configuration supplémentaire pour les développeurs.

 // GOOD

accessoires: {
   myUsername: String
}
 
// MAL

accessoires: {
   "mon-nom d'utilisateur": chaîne
} 

2. Emission d'événements pour partager des données de l'enfant vers le parent

Maintenant que nous avons des données passant dans la hiérarchie, passons-les dans l'autre sens: d'un composant enfant à un parent. Nous ne pouvons pas utiliser d'accessoires, mais nous pouvons utiliser des événements et des écouteurs personnalisés.

Chaque instance de Vue peut appeler une méthode . $ Emit (eventName) qui déclenche un événement. Ensuite, nous pouvons écouter cet événement de la même manière que n'importe quel autre, en utilisant la directive v-on.

Création d'un événement personnalisé

Développons notre exemple de profil utilisateur en ajoutant un bouton qui modifie le nom d'utilisateur. À l'intérieur de notre composant enfant ( AccountInfo.vue ), créons le bouton.

Ensuite, lorsque ce bouton sera cliqué, nous émettrons un événement appelé changeUsername .

.  

Dans le parent, nous gérons cet événement et modifions la variable user.username . Comme nous en avons discuté plus tôt, nous pouvons écouter les événements en utilisant la directive v-on ou "@" pour faire court.

Essayons. Vous devez voir que lorsque vous cliquez sur le bouton, le nom d'utilisateur devient "nouveau nom".

Conseil: les événements personnalisés peuvent accepter des arguments

Le cas d'utilisation le plus courant pour transmettre des arguments à vos événements est lorsque vous souhaitez un composant enfant pour pouvoir définir une valeur spécifique pour son accessoire. Vous ne voulez jamais modifier directement la valeur d'un accessoire à partir du composant lui-même.

Cependant, heureusement, nous pouvons utiliser des arguments de passage avec nos événements personnalisés pour modifier les valeurs du composant parent.

Disons que nous voulons modifier l'événement changeUsername afin de lui transmettre une valeur.

La méthode $ emit prend un deuxième paramètre facultatif pour les arguments. Donc, tout ce que nous faisons est d'ajouter notre nouvelle valeur de nom d'utilisateur après le nom de notre événement.

 this. $ Emit ('changeUsername', 'mattmaribojoc') 

Ensuite, dans notre composant parent, nous pouvons accéder à ces valeurs en ligne en utilisant une variable spéciale $ event ou nous pouvons écrire une méthode de gestionnaire qui prend un paramètre.

 
 OU
 

 
exporter par défaut {
...
méthodes: {
   changeUsername (nom d'utilisateur) {
     this.user.username = nom d'utilisateur;
   }
}
} 

3. Utilisation de Vuex pour créer un état partagé au niveau de l'application

D'accord – nous savons comment partager des données entre parents / enfants, mais qu'en est-il des autres composants? Devons-nous créer un système de hiérarchie extrêmement complexe si nous voulons transmettre des données?

Heureusement non. La merveilleuse bibliothèque de gestion des états Vuex simplifie la vie des développeurs depuis des années. En bref, il crée un magasin de données centralisé accessible à tous les composants.

Dans les méthodes que nous avons utilisées précédemment (accessoires / événements émetteurs), chaque composant a son propre état de données que nous partageons ensuite entre les composants. Cependant, Vuex nous permet d'extraire toutes les données partagées dans un seul état auquel chaque composant peut accéder facilement. Cet état partagé est appelé magasin.

Essayons.

Parce que Vuex est distinct du code principal de Vue, nous devons d'abord l'installer et l'importer dans notre projet. Tout d'abord, nous devrons exécuter npm install vuex --save dans notre CLI de projet.

Ensuite, créez un dossier src / store avec un fichier index.js qui contient le code suivant. [19659016] // store / index.js
 
importer Vue depuis "vue";
importer Vuex depuis "vuex";
 
Vue.use (Vuex);
 
exporter le nouveau Vuex.Store par défaut ({
 Etat: {},
 getters: {},
 mutations: {},
 Actions: {}
});

Pour l'inclure dans notre instance racine de Vue, nous devons importer notre fichier store / index.js et le passer dans notre constructeur Vue.

 // main.js
 
importer le magasin de "./store";
 
nouvelle Vue ({
  boutique,
  ... 

Accès aux composants intérieurs du magasin Vue

Depuis que nous avons ajouté notre magasin Vuex à notre instance racine de Vue, il est injecté dans tous les enfants de la racine. Si nous voulons accéder au magasin à partir d'un composant, nous pouvons le faire via ceci. $ Store .

Maintenant, plongons dans les spécificités de chacune des quatre parties d'un magasin Vuec.

1 . État

L'état Vuex est un objet qui contient des données au niveau de l'application. Toutes les instances de Vue pourront accéder à ces données.

Pour notre magasin, créons un objet utilisateur qui stocke plus de données de profil utilisateur.

 exporte le nouveau Vuex.Store par défaut ({19659016]
 Etat: {
   utilisateur: {
     nom d'utilisateur: 'matt',
     nom complet: «Matt Maribojoc»
   }
 },
 getters: {},
 mutations: {},
 Actions: {}
}); 

Nous pouvons accéder à ces données dans n'importe quel composant d'instance comme celui-ci.

 mount () {
   console.log (this. $ store.state.user.username);
}, 

2. Getters

Nous utilisons les getters Vuex pour renvoyer une valeur modifiée des données d'état. Une bonne façon de penser aux getters est de les traiter comme des propriétés calculées. Par exemple, les getters, comme les propriétés calculées, mettent en cache leurs résultats et ne réévaluent que lorsqu'une dépendance est modifiée.

En s'appuyant sur notre magasin précédent, disons que nous voulons créer une méthode qui renvoie le prénom d'un utilisateur en se basant sur la totalité attribut de nom.

 getters: {
   firstName: state => {
     return state.user.fullName.split ('') [0]
   }
 } 

Les propriétés du getter Vuex sont disponibles pour les composants sur l'objet store.getters .

 monté () {
   console.log (this. $ store.getters.firstName);
} 

Astuce: Connaître les arguments par défaut de Getter

Par défaut, les getters Vuex acceptent deux arguments.

1. state – l'objet state pour notre application;
2. getters – l'objet store.getters, ce qui signifie que nous pouvons appelez d'autres getters dans notre magasin.

Chaque getter que vous déclarez aura besoin du premier argument d'état. Et selon la façon dont vous concevez votre code, vos getters peuvent se référencer en utilisant le deuxième argument "getters".

Faisons un getter de nom de famille qui supprime simplement notre valeur de prénom de notre propriété d'état de nom complet. Cet exemple nécessiterait à la fois les objets state et getters.

 lastName (state, getters) {
     return state.user.fullName.replace (getters.firstName, '');
} 

Astuce: passer des arguments personnalisés aux getters Vuex

Une autre fonctionnalité intéressante des getters est que nous pouvons leur passer des arguments personnalisés en faisant en sorte que notre getter renvoie une méthode.

 prefixedName: (state, getters) => (prefix ) => {
     return prefix + getters.lastName;
}
 
// dans notre composant
console.log (this. $ store.getters.prefixedName ("Mr.")); 

3. Mutations

Les mutations sont le seul moyen de modifier correctement la valeur de l'objet d'état. Un détail important à noter est que les mutations doivent être synchrones .

Comme les getters, les mutations acceptent toujours la propriété d'état Vuex comme premier argument. Ils acceptent également un argument personnalisé – appelé charge utile – comme deuxième argument.

Par exemple, faisons une mutation pour changer le nom d'un utilisateur en une valeur spécifique.

 mutations: {
   changeName (état, charge utile) {
     state.user.fullName = charge utile
   }
}, 

Ensuite, nous pouvons appeler cette méthode à partir de notre composant en utilisant la méthode store.commit avec notre charge utile comme deuxième argument.

 this. $ Store.commit ("changeName", "Nouveau nom"); 

Plus souvent qu'autrement, vous allez vouloir que votre charge utile soit un objet. Non seulement cela signifie que vous pouvez passer plusieurs arguments à une mutation, mais cela rend également votre code plus lisible en raison des noms de propriété de votre objet.

 changeName (state, payload) {
     state.user.fullName = payload.newName
} 

Il existe deux façons différentes d'appeler des mutations avec une charge utile.

1. Vous pouvez avoir le type de mutation comme premier argument et la charge utile comme deuxième.
2. Vous pouvez déclarer passer un seul objet, avec une propriété pour le type et un autre pour la charge utile.

 this. $ store.commit ("changeName", {
       newName: "New Name 1",
});
 
     // ou
 
 this. $ store.commit ({
       tapez: "changeName",
       newName: "Nouveau nom 2"
}); 

Il n'y a pas vraiment de différence entre la façon dont les deux fonctionnent, donc c'est totalement selon vos préférences personnelles. N'oubliez pas qu'il est toujours préférable d'être cohérent tout au long de votre projet, alors celui que vous choisissez, respectez-le!

4. Actions

Dans Vuex, les actions sont assez similaires aux mutations car nous les utilisons pour changer l'état. Cependant, les actions ne modifient pas les valeurs elles-mêmes. Au lieu de cela, les actions commettent des mutations.

De plus, bien que les mutations Vuex doivent être synchrones, les actions ne le font pas. En utilisant des actions, nous pouvons appeler une mutation après un appel d'API, par exemple.

Alors que la plupart des gestionnaires Vuex que nous avons vus acceptent l'état comme paramètre principal, les actions acceptent un objet contextuel. Cet objet de contexte nous permet d'accéder aux propriétés de notre magasin Vuex (par exemple, state, commit, getters).

Voici un exemple d'une action Vuex qui attend deux secondes puis valide la mutation changeName . [19659016] actions: {
   changeName (contexte, charge utile) {
     setTimeout (() => {
       context.commit ("changeName", charge utile);
     }, 2000);
   }
}

À l'intérieur de nos composants, nous utilisons la méthode store.dispatch afin d'exécuter notre fonction. Nous passons des arguments comme nous l'avons fait avec les mutations. Nous déclarons le type et nous transmettons tous les arguments personnalisés dans le deuxième argument.

 this. $ Store.dispatch ("changeName", {
      newName: "Nouveau nom de l'action"
}); 

Conclusion

Maintenant, vous devriez connaître trois façons différentes de partager des données entre les composants de VueJS: les accessoires, les événements personnalisés et un magasin Vuex.

J'espère que ce didacticiel vous a aidé à vous donner plus d'informations dans différentes méthodes Vue et meilleures pratiques. Faites-moi savoir comment vous les avez mis en œuvre dans vos projets!

Pour en savoir plus

Si vous souhaitez approfondir le côté technique / les capacités de chaque technique, voici quelques excellents points de départ. [19659116] Éditorial fracassant « /> (dm, yk, il)