Comprendre provide et inject dans Vue.js

Dans Vue.js, provide et inject forment un duo puissant pour partager des données entre des composants sans avoir à passer par les props à chaque niveau intermédiaire. Ces mécanismes sont particulièrement utiles pour les informations transversales qui doivent être accessibles dans plusieurs parties de l’application, comme un thème visuel, une configuration globale ou les informations d’un utilisateur connecté. L’objectif est d’éviter la cascade de props, qui encombre souvent le code et rend la maintenance plus complexe.

provide déclare une valeur dans un composant parent, et inject permet de la récupérer dans un composant enfant, même profondément imbriqué dans l’arborescence. Voyons comment cela fonctionne et comment l’utiliser efficacement.

Principe de propagation implicite

provide et inject permettent de transmettre des données sans passer par chaque composant intermédiaire. C’est un peu comme un fluide qui se déplace dans une hiérarchie : une fois fourni, il circule sans encombre, jusqu’à ce qu’un composant descendant en ait besoin.

Prenons un exemple concret dans notre application vidéo-musicale. Le composant racine gère une variable theme qui peut être clair ou sombre. Ce thème est fourni à toute l’application avec provide.

Par exemple, fournir un thème visuel

Imaginons un thème visuel qui peut être clair ou sombre et qui doit être appliqué à plusieurs composants. Dans l’application, la barre de navigation, les fiches vidéo, et le lecteur doivent tous adopter ce thème. En utilisant provide et inject, nous évitons de passer cette information manuellement via les props à chaque niveau intermédiaire. Le code devient plus propre et plus facile à maintenir.

// Composant racine (App.vue)
import { createApp } from 'vue';
import MainLayout from './components/MainLayout.js';

const app = createApp({
  components: { MainLayout },
  setup() {
    const theme = Vue.ref('clair'); // état réactif : 'clair' ou 'sombre'

    // Fournir le thème à toute l'application
    Vue.provide('theme', theme);

    return { theme };
  },
  template: `
    <div :class="theme">
      <MainLayout />
    </div>
  `
});

app.mount('#app');

// Composant racine (App.vue)
import { createApp } from 'vue';
import MainLayout from './components/MainLayout.js';

const app = createApp({
  components: { MainLayout },
  setup() {
    const theme = Vue.ref('clair'); // état réactif : 'clair' ou 'sombre'

    // Fournir le thème à toute l'application
    Vue.provide('theme', theme);

    return { theme };
  },
  template: `
    <div :class="theme">
      <MainLayout />
    </div>
  `
});

app.mount('#app');

Dans cet exemple, provide rend le theme accessible à tous les descendants de App.vue, sans avoir à passer explicitement par chaque composant intermédiaire.

Un autre cas typique : thème, config, utilisateur

Dans notre application, le thème n’est pas la seule donnée partagée entre les composants. Imaginons que l’application gère aussi une configuration globale ou des informations utilisateur (comme l’authentification). Toutes ces données peuvent être facilement partagées avec provide et récupérées avec inject.

Dans le composant racine, nous définissons une valeur réactive pour le thème et utilisons provide pour la rendre disponible. Ensuite, dans un composant profond comme VideoLightbox, nous utilisons inject pour récupérer cette valeur, comme montré ci-dessous :

// Composant profond (VideoLightbox.vue)
export default {
  name: 'VideoLightbox',
  setup() {
    // Récupérer le thème fourni par un ancêtre
    const theme = Vue.inject('theme');

    return { theme };
  },
  template: `
    <div class="lightbox" :data-theme="theme">
      <p>Lightbox affichée en mode : {{ theme }}</p>
    </div>
  `
};

// Composant profond (VideoLightbox.vue)
export default {
  name: 'VideoLightbox',
  setup() {
    // Récupérer le thème fourni par un ancêtre
    const theme = Vue.inject('theme');

    return { theme };
  },
  template: `
    <div class="lightbox" :data-theme="theme">
      <p>Lightbox affichée en mode : {{ theme }}</p>
    </div>
  `
};

Ici, inject récupère la valeur theme de manière transparente, sans que les composants intermédiaires aient besoin de s’en soucier. Ce processus simplifie grandement le code et permet de garder les composants plus modulaires et lisibles.

Différence avec les props

Props : passage explicite à chaque niveau

Les props servent à transmettre des données d’un parent à un enfant, mais le passage des props doit se faire explicitement à chaque niveau de l’arborescence. Cela peut rapidement devenir verbeux et difficile à maintenir lorsqu’il y a de nombreux niveaux de composants.

Composant Parent – App.vue :
Le parent définit et passe la prop theme_prop à l’enfant.

<template>
  <Child :theme_prop="theme" />
</template>
<script>
export default {
  data() {
    return { theme: 'clair' };
  }
};
</script>

<template>
  <Child :theme_prop="theme" />
</template>
<script>
export default {
  data() {
    return { theme: 'clair' };
  }
};
</script>

Le composant App.vue définit une prop theme_prop et la transmet à son enfant Child.vue.

Composant Enfant – Child.vue :
L’enfant reçoit la prop et la passe à son propre enfant.

<template>
  <GrandChild :theme_prop="theme_prop" />
</template>
<script>
export default {
  props: ['theme_prop']
};
</script>

<template>
  <GrandChild :theme_prop="theme_prop" />
</template>
<script>
export default {
  props: ['theme_prop']
};
</script>

Le composant Child.vue reçoit la prop theme_prop et la passe à son enfant GrandChild.vue.

Composant Petit-Enfant – GrandChild.vue :
Le petit-enfant reçoit la prop theme_prop.

<template>
  <div :class="theme_prop">Thème: {{ theme_prop }}</div>
</template>
<script>
export default {
  props: ['theme_prop']
};
</script>

<template>
  <div :class="theme_prop">Thème: {{ theme_prop }}</div>
</template>
<script>
export default {
  props: ['theme_prop']
};
</script>

Le composant GrandChild.vue reçoit la prop theme_prop et l’utilise dans son template.

Problème : Lorsque l’arborescence des composants devient complexe, le passage explicite des props à chaque niveau peut devenir rapidement verbeux et difficile à maintenir.

Provide/Inject : passage implicite

Avec provide et inject, la donnée circule automatiquement dans la descendance, sans nécessiter de relai à chaque niveau intermédiaire. Le composant parent fournit la donnée, et le composant descendant l’injecte sans aucune intervention des composants intermédiaires. Cela simplifie considérablement la structure du code.

Composant Parent – App.vue :
Le parent fournit la donnée avec theme_provide via provide.

<template>
  <Child />
</template>
<script>
import { provide } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    const theme_provide = 'clair'; // Valeur fournie
    provide('theme_provide', theme_provide); // Fournir à toute la descendance
  }
};
</script>

<template>
  <Child />
</template>
<script>
import { provide } from 'vue';
import Child from './Child.vue';

export default {
  components: { Child },
  setup() {
    const theme_provide = 'clair'; // Valeur fournie
    provide('theme_provide', theme_provide); // Fournir à toute la descendance
  }
};
</script>

Le parent utilise provide pour fournir theme_provide à toute la descendance.

Composant Enfant – Child.vue :
L’enfant injecte la donnée theme_provide sans la recevoir en prop.

<template>
  <GrandChild />
</template>
<script>
import { inject } from 'vue';
import GrandChild from './GrandChild.vue';

export default {
  components: { GrandChild },
  setup() {
    const theme_provide = inject('theme_provide'); // Récupérer la donnée
    return { theme_provide };
  }
};
</script>

<template>
  <GrandChild />
</template>
<script>
import { inject } from 'vue';
import GrandChild from './GrandChild.vue';

export default {
  components: { GrandChild },
  setup() {
    const theme_provide = inject('theme_provide'); // Récupérer la donnée
    return { theme_provide };
  }
};
</script>

Le composant Child.vue récupère theme_provide via inject, sans avoir besoin de la recevoir explicitement en prop.

Composant Petit-Enfant – GrandChild.vue :
Le petit-enfant récupère directement la donnée, sans dépendre des composants intermédiaires.

<template>
  <div :class="theme_provide">Thème: {{ theme_provide }}</div>
</template>
<script>
import { inject } from 'vue';

export default {
  setup() {
    const theme_provide = inject('theme_provide'); // Récupérer la donnée
    return { theme_provide };
  }
};
</script>

<template>
  <div :class="theme_provide">Thème: {{ theme_provide }}</div>
</template>
<script>
import { inject } from 'vue';

export default {
  setup() {
    const theme_provide = inject('theme_provide'); // Récupérer la donnée
    return { theme_provide };
  }
};
</script>

1. Le composant GrandChild.vue récupère theme_provide directement depuis le parent via inject.

Avantages de provide et inject :

• Moins de code : La donnée est fournie une seule fois et peut être récupérée directement par les descendants, sans passage explicite via les composants intermédiaires.
• Plus flexible : Vous pouvez ajouter de nouveaux composants descendants sans devoir modifier la chaîne de transmission des props.
• Réduction des erreurs : Pas besoin de répéter l’envoi des props à chaque niveau, réduisant ainsi le risque d’oublis ou de mauvaise gestion.

provide et inject sont complémentaires des props et non un remplacement systématique. Ils conviennent particulièrement bien pour les informations transversales qui doivent être partagées à travers l’application, mais ne doivent pas être utilisées pour des données métiers spécifiques.

En résumé, bien que les props soient pratiques pour des données locales et simples, leur propagation à travers plusieurs niveaux devient rapidement encombrante dans des applications plus complexes. provide et inject permettent de simplifier cette gestion en offrant une transmission implicite des données, idéale pour des informations transversales, comme un thème ou des configurations partagées.

Bonne gestion de la dépendance entre composants

Bien que provide et inject soient des outils puissants dans Vue.js pour partager des données entre un parent et ses descendants, il est essentiel de les utiliser avec parcimonie. Si un composant profond dépend de plusieurs valeurs injectées par des ancêtres, cela peut rendre le code difficile à comprendre et à maintenir.

1. Ne pas en abuser : trop de dépendances implicites peuvent rendre l’application plus difficile à comprendre

Bien que provide et inject simplifient la propagation de données, leur utilisation excessive peut rendre les dépendances entre composants moins évidentes. Si un composant injecte de nombreuses données de ses ancêtres, cela devient difficile de savoir d’où ces données viennent et quel composant les fournit.

Problème : Si un composant profond injecte plusieurs données de manière implicite, il devient difficile de comprendre les liens entre les composants, ce qui nuit à la lisibilité du code et à la maintenance future.

Exemple : Imaginons que plusieurs valeurs soient injectées dans un même composant, ce qui peut vite devenir compliqué à gérer.

// Composant enfant avec trop de dépendances implicites
setup() {
  const theme = inject('theme');
  const user = inject('user');
  const settings = inject('settings');
  // ... d'autres injections
  return { theme, user, settings };
}

// Composant enfant avec trop de dépendances implicites
setup() {
  const theme = inject('theme');
  const user = inject('user');
  const settings = inject('settings');
  // ... d'autres injections
  return { theme, user, settings };
}

Ici, le composant récupère de nombreuses données sans savoir exactement d’où elles proviennent. À long terme, cette approche peut rendre le flux de données difficile à suivre.

2. Utiliser provide et inject pour des informations transversales

Les provide et inject sont particulièrement utiles pour des données qui doivent être partagées à travers plusieurs niveaux de l’arborescence des composants, comme des informations globales ou transversales. Cela inclut des informations telles que :

• Thème visuel (clair ou sombre)
• Configuration globale (langue, format de devise, etc.)
• Données utilisateur (authentification, profil, etc.)

L’idée est de partager une donnée globale ou contextuelle que plusieurs composants peuvent consommer sans avoir à passer cette donnée manuellement à travers chaque niveau de l’arborescence.

Exemple : Fournir une configuration globale qui sera utilisée dans différents composants de l’application.

// Composant racine - App.vue
<template>
  <Layout />
</template>

<script>
import { provide } from 'vue';
import Layout from './components/Layout.vue';

export default {
  components: { Layout },
  setup() {
    const userConfig = { language: 'en', currency: 'USD' };
    provide('userConfig', userConfig); // Fournir les configurations globales
  }
};
</script>

// Composant racine - App.vue
<template>
  <Layout />
</template>

<script>
import { provide } from 'vue';
import Layout from './components/Layout.vue';

export default {
  components: { Layout },
  setup() {
    const userConfig = { language: 'en', currency: 'USD' };
    provide('userConfig', userConfig); // Fournir les configurations globales
  }
};
</script>

Dans cet exemple, userConfig contient des informations transversales (langue et devise), utiles pour plusieurs composants à travers l’application.

3. Prévoir une valeur par défaut dans inject si provide n’est pas défini

Lorsqu’on utilise inject, il est important de prévoir une valeur par défaut au cas où la donnée ne serait pas fournie par le parent. Cela permet d’éviter des erreurs si un composant tente d’injecter une donnée qui n’a pas été fournie. Cela peut être particulièrement utile dans des situations où le parent ne fournit pas toujours la donnée (par exemple, dans des composants optionnels ou des modules).

Exemple : Prévoir une valeur par défaut si la donnée n’est pas fournie par le parent.

// Composant enfant avec valeur par défaut
setup() {
  const theme = inject('theme', 'clair'); // Si 'theme' n'est pas fourni, utiliser 'clair' par défaut
  return { theme };
}

// Composant enfant avec valeur par défaut
setup() {
  const theme = inject('theme', 'clair'); // Si 'theme' n'est pas fourni, utiliser 'clair' par défaut
  return { theme };
}

Dans cet exemple, si le composant parent ne fournit pas de valeur pour theme, le composant enfant utilisera la valeur par défaut 'clair'. Cela rend l’utilisation de provide et inject plus flexible et évite des erreurs potentielles.

Conclusion

L’utilisation de provide et inject est une excellente solution pour partager des informations globales ou contextuelles à travers plusieurs niveaux de composants. Toutefois, il est important de ne pas en abuser. Trop de dépendances implicites peuvent rendre le code difficile à maintenir et à comprendre. Il est donc préférable de les utiliser pour des informations transversales comme le thème, la configuration ou l’état de l’utilisateur. De plus, il est toujours préférable de prévoir une valeur par défaut dans inject pour éviter des comportements indésirables lorsque la donnée n’est pas fournie.

Dans le prochain article, nous explorerons comment computed et watch peuvent interagir avec les données injectées, et comment les utiliser efficacement pour gérer les réactions aux changements d’état dans votre application.