Vue propose plusieurs façons de gérer le flux de données et la communication entre les composants. Un défi courant en tant que développeur Vue est le forage d’accessoires, où vous transmettez des données à travers différentes couches de composants, conduisant à une base de code complexe et moins maintenable.
Vue propose le mécanisme de fourniture/injection, une solution propre au forage d’hélices. Provide/inject aide à gérer la communication de données entre les parents et les composants enfants profondément imbriqués.
Table des matières
Comprendre le problème du forage d’hélices
Avant de se plonger dans la solution fournir/injecter, il est important de comprendre le problème. L’exploration des accessoires se produit lorsque vous devez transmettre des données d’un composant parent de niveau supérieur vers un composant enfant profondément imbriqué.
Les composants intermédiaires de cette hiérarchie doivent recevoir et transmettre les données, même s’ils ne les utilisent pas eux-mêmes. Pour transmettre des données d’un composant parent à un composant enfant, vous devrez transmettre ces données en tant qu’accessoires à vos composants Vue.
Considérez la hiérarchie de composants suivante à titre d’exemple :
Supposons que les données du composant App doivent atteindre le GrandChildComponent. Dans ce cas, vous devrez le transmettre via les deux composants intermédiaires à l’aide d’accessoires, même si ces composants n’ont pas besoin des données elles-mêmes pour fonctionner correctement. Cela peut conduire à un code volumineux, plus difficile à déboguer.
Qu’est-ce que Fournir/Injecter ?
Vue résout ce problème avec la fonctionnalité fournir/injecter, qui permet à un composant parent de fournir des données ou des fonctions à ses composants descendants, quelle que soit leur profondeur d’imbrication. Cette solution simplifie le partage des données et améliore l’organisation du code.
Composant fournisseur
Un composant fournisseur a l’intention de partager des données ou des méthodes avec ses descendants. Il utilise l’option provide pour mettre ces données à la disposition de ses enfants. Voici un exemple de composant fournisseur :
<template>
<div>
<ParentComponent/>
</div>
</template><script setup>
import { provide } from 'vue';
import ParentComponent from './components/ParentComponent.vue';const greeting = 'Hello from Provider';
provide('greeting', greeting);
</script>
Ce bloc de code montre un composant fournisseur, App, qui fournit une variable de bienvenue à tous ses composants descendants. Pour fournir une variable, vous devez définir une clé. Définir la clé avec le même nom que la variable permet de garder votre code maintenable.
Composants descendants
Les composants descendants sont des composants au sein d’une structure imbriquée. Ils peuvent injecter et utiliser les données fournies dans leur instance de composant. Voici comment procéder :
<script setup>
import { inject } from 'vue';const injectedData = inject('greeting');
</script>
Le composant descendant injecte les données fournies et peut y accéder dans son modèle en tant que variable définie localement.
Maintenant, considérons l’image ci-dessous :
Dans cette image, vous pouvez voir une hiérarchie de quatre composants, en commençant par un composant racine qui sert de point de départ. Les autres composants s’imbriquent dans la hiérarchie et se terminent par le composant GrandChild.
Le composant GrandChild reçoit les données fournies par le composant App. Avec ce mécanisme en place, vous pouvez éviter de transmettre des données via les composants Parent et Enfant, car ces composants n’ont pas besoin des données pour fonctionner correctement.
Fournir des données au niveau d’une application (mondiale)
Vous pouvez fournir des données au niveau de l’application avec le provide/inject de Vue. Il s’agit d’un cas d’utilisation courant pour le partage de données et de configurations entre différents composants de votre application Vue.
Voici un exemple de la manière dont vous pouvez fournir des données au niveau d’une application :
import { createApp } from 'vue'
import App from './App.vue'const globalConfig = {
apiUrl: 'https://example.com/api',
authKey: 'my-secret-key',
};app.provide('globalConfig', globalConfig);
createApp(App).mount('#app')
Supposons que vous disposiez d’une application qui nécessite un objet de configuration globale contenant des points de terminaison de l’interface de programmation d’application (API), des informations d’authentification utilisateur et d’autres paramètres.
Vous pouvez y parvenir en fournissant les données de configuration au niveau du composant de niveau supérieur, généralement dans votre fichier main.js, permettant à d’autres composants de les injecter et de les utiliser :
<template>
<div>
<h1>API Settings</h1>
<p>API URL: {{ globalConfig.apiUrl }}</p>
<p>Authentication Key: {{ globalConfig.authKey }}</p>
</div>
</template><script setup>
import { inject } from 'vue';const globalConfig = inject('globalConfig');
</script>
Le composant ci-dessus utilise la fonction inject pour accéder à l’objet globalConfig, que l’application fournit au niveau global. Vous pouvez accéder à toutes les propriétés ou paramètres de globalConfig en interpolant ou en liant ces propriétés avec différentes techniques de liaison de données dans Vue au sein du composant.
Avantages et utilisations de Provide et Inject
Voici quelques avantages et utilisations importantes de la fonctionnalité fournir/injecter lors de la création d’applications Web dans Vue.
Code plus propre et plus performant
En utilisant provide/inject, vous supprimez le besoin pour les composants intermédiaires de transmettre les données qu’ils n’utilisent pas. Cela se traduit par un code plus propre et plus maintenable en réduisant les déclarations d’accessoires inutiles.
De plus, le système de réactivité de Vue garantit que les composants ne sont restitués que lorsque leurs dépendances changent. Fournir/injecter permet de partager efficacement les données, ce qui peut conduire à des optimisations de performances en réduisant les rendus inutiles.
Encapsulation améliorée des composants
Fournir/injecter favorise une meilleure encapsulation des composants. Les composants enfants n’ont qu’à se soucier des données qu’ils utilisent explicitement, réduisant ainsi leur dépendance à l’égard de la structure de données spécifique des composants parents.
Considérez un composant de sélecteur de date qui s’appuie sur des paramètres de format de date localisés. Au lieu de transmettre ces paramètres en tant qu’accessoires, vous pouvez les fournir dans le composant parent et les injecter uniquement dans le composant sélecteur de date. Cela conduit à une séparation plus claire des préoccupations.
Injection de dépendance
Provide/inject peut servir de forme simple d’injection de dépendances, rendant les services et paramètres globaux (tels que les clients API, les points de terminaison, les préférences utilisateur ou les magasins de données) facilement disponibles pour tout composant qui en a besoin. Cela garantit des configurations cohérentes dans votre application.
Points essentiels à prendre en compte lors de l’utilisation de Provide et Inject
Bien que le mécanisme d’alimentation/injection offre de nombreux avantages, vous devez l’utiliser avec précaution pour éviter les effets secondaires indésirables.
- Utilisez provide/inject pour partager des données importantes ou des fonctions nécessaires dans une hiérarchie de composants comme la configuration ou les clés API. En abuser peut rendre les relations entre vos composants trop complexes.
- Documentez ce que le composant fournisseur fournit et quels composants descendants doivent injecter. Cela facilite la compréhension et la maintenance de vos composants, en particulier lorsque vous travaillez en équipe.
- Soyez prudent lorsque vous créez des boucles de dépendance, dans lesquelles un composant enfant fournit quelque chose qu’un composant parent injecte. Cela entraînera des erreurs et un comportement inattendu.
Provide/Inject est-il la meilleure option pour la gestion de l’état dans Vue ?
Fournir/injecter est une autre fonctionnalité utile de Vue pour gérer le flux et l’état des données dans les composants. Fournir/injecter comporte son lot d’inconvénients. Fournir/injecter peut entraîner des problèmes de débogage, de test et de maintenance d’applications à grande échelle.
Il serait préférable d’utiliser Pinia, le cadre de gestion d’état officiel de Vue, pour gérer les états complexes dans votre application Vue. Pinia fournit un magasin centralisé et une approche sécurisée de la gestion de l’état, rendant le développement d’applications Vue plus accessible.