Libérez-vous du forage Vue Prop avec Provide/Inject

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.

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 comme accessoires à vos composants Vue.

Considérez la hiérarchie de composants suivante à titre d'exemple :

• Application
  • Composant parent
    • Composant Enfant
      • Composant GrandEnfant

Supposons que les données du Application Le composant doit atteindre le Composant GrandChild. 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 le fournir/injecter fonctionnalité, 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 le fournir possibilité de mettre ces données à la disposition de ses enfants. Voici un exemple de composant fournisseur :

<template>
<div>

<ParentComponent/>
div>
template>
<scriptsetup>
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, Application, qui fournit un salutation variable à 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 :

<scriptsetup>
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 Petit enfant composant.

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 le Parent et Enfant composants, 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 :

// main.js
import { createApp } from'vue'
import App from'./App.vue'
const globalConfig = {
 apiUrl: 'https://example.com/api',
 authKey: 'my-secret-key',
// Other configuration settings...
};
app.provide('globalConfig', globalConfig);
createApp(App).mount('#app')

Supposons que vous ayez une application qui nécessite un objet de configuration globale contenant Interface de programmation d'applications (API) points de terminaison, informations d’authentification des utilisateurs et 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 main.js fichier, permettant à d'autres composants de l'injecter et de l'utiliser :

<template>
<div>
<h1>API Settingsh1>
<p>API URL: {{ globalConfig.apiUrl }}p>
<p>Authentication Key: {{ globalConfig.authKey }}p>
div>
template>
<scriptsetup>
import { inject } from 'vue';
const globalConfig = inject('globalConfig');
script>

Le composant ci-dessus utilise le injecter fonction pour accéder à configuration globale objet, 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 fournir/injecter, vous supprimez la nécessité 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, créant des services et des paramètres globaux, comme Clients API, points de terminaison, préférences utilisateur ou 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

Tandis que le fournir/injecter Ce mécanisme offre de nombreux avantages, vous devez l’utiliser avec précaution pour éviter les effets secondaires indésirables.

• Utiliser fournir/injecter pour partager des données ou des fonctions importantes 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.