Frontend Academy · Leçon

provide() et inject() pour l’injection de dépendances

provide() et inject() pour l’injection de dépendances est une leçon Frontend Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Frontend Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Frontend Academy comprend 4 leçons au total.

Le problème du transfert de propriétés

Parfois, les données se trouvent dans un composant situé très haut dans l'arbre et doivent parvenir à un descendant éloigné. Les faire transiter par chaque composant intermédiaire (transfert de propriétés) est fastidieux et fragile.

provide() — Déclarer une valeur

Un ancêtre appelle provide(key, value) dans setup(). La valeur devient disponible pour tous les descendants.

<!-- ParentComponent.vue -->
<script setup>
import { provide, ref } from 'vue';

const theme = ref('dark');
provide('theme', theme);
</script>

inject() — Consommer une valeur

N'importe quel descendant peut appeler inject(key) pour la lire.

<!-- DeepChild.vue -->
<script setup>
import { inject } from 'vue';

const theme = inject('theme');
</script>

<template>
  <div :class="theme">Theme is: {{ theme }}</div>
</template>

Réactivité avec ref/reactive

Si vous fournissez une référence ou un objet réactif, les descendants obtiennent une valeur réactive : les mises à jour se propagent automatiquement.

// Parent
const user = reactive({ name: 'Alice', role: 'admin' });
provide('user', user);

// Anywhere descendant
const user = inject('user');
user.role; // 'admin' — reactive

Clés symboliques pour éviter les collisions

Les clés textuelles risquent d'entrer en collision dans les grandes applications. Les symboles garantissent l'unicité : définissez-les dans un fichier partagé.

// keys.ts
export const ThemeKey = Symbol('theme');
export const UserKey  = Symbol('user');

// Parent
provide(ThemeKey, ref('dark'));
// Child
const theme = inject(ThemeKey);

Prise en charge de TypeScript

Utilisez InjectionKey<T> pour assurer la sûreté des types des deux côtés.

import type { InjectionKey, Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

// Provider:
provide(ThemeKey, ref('dark'));

// Consumer (type-checked):
const theme = inject(ThemeKey); // Ref<string> | undefined

Valeurs par défaut

Si aucun ancêtre ne fournit la clé, inject renvoie undefined, sauf si vous lui transmettez une valeur par défaut.

const theme = inject('theme', 'light'); // default if missing
const lazy  = inject('user', () => createDefaultUser(), true); // factory

Valeurs fournies en lecture seule

Pour empêcher les descendants de modifier l'état partagé, encapsulez-le avec readonly().

import { readonly } from 'vue';

const user = reactive({ name: 'Alice' });
provide('user', readonly(user));
// Children can read but cannot mutate

provide au niveau de l'application

Fournissez des valeurs au niveau de l'application afin qu'elles soient disponibles partout : c'est utile pour les plugins.

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.provide('apiClient', new ApiClient());
app.mount('#app');

Encapsuler dans un composable

Encapsulez provide/inject dans un composable pour obtenir une API plus claire côté consommateur.

// useTheme.ts
import { inject, type InjectionKey, type Ref } from 'vue';

export const ThemeKey: InjectionKey<Ref<string>> = Symbol('theme');

export function useTheme() {
  const theme = inject(ThemeKey);
  if (!theme) throw new Error('useTheme: no provider in tree');
  return theme;
}

provide/inject ou Pinia

provide/inject : solution légère, sans bibliothèque, idéale pour les valeurs de type plugin (thème, langue, utilisateur actuel). Pinia : gestion complète de l'état avec DevTools, optimale pour un état réactif à l'échelle de l'application et soumis à des mises à jour complexes.

Vérification rapide

Quelle est la méthode recommandée pour éviter les collisions de clés avec provide/inject dans une grande application Vue ?

Récapitulatif : provide/inject

L'ancêtre fournit, le descendant injecte : aucun transfert de propriétés. Les valeurs réactives (ref/reactive) se propagent de manière réactive. Les clés symboliques et InjectionKey garantissent une injection sûre du point de vue des types et sans collision. La valeur par défaut est le deuxième argument de inject. Utilisez readonly() pour empêcher les modifications. Le provide au niveau de l'application convient aux plugins partagés entre applications. C'est une alternative légère à Pinia pour les valeurs de type plugin.

Questions Fréquemment Posées

La leçon « provide() et inject() pour l’injection de dépendances » est-elle gratuite ?

Oui — le texte complet de « provide() et inject() pour l’injection de dépendances » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Frontend Academy, passe à CoddyKit PRO. Le cours Frontend Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « provide() et inject() pour l’injection de dépendances » ?

Fournissez des valeurs dans un composant ancêtre et injectez-les profondément dans l’arbre, en évitant la transmission excessive de propriétés sans bibliothèque complète de gestion d’état. Tu pratiques Frontend Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Frontend Academy ?

Aucune expérience préalable n'est requise. Frontend Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « provide() et inject() pour l’injection de dépendances » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Frontend Academy ?

Oui. Chaque leçon Frontend Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

provide() et inject() pour l’injection de dépendances
Composants asynchrones et Suspense
Directives personnalisées
Système de plugins : app.use()

← Retour à Frontend Academy