Passer au contenu
Sur cette page

Composition API:
Injection de dépendances

provide()

Fournit une valeur qui peut être injectée par les composants descendants.

  • Type :

    ts
    function provide<T>(key: InjectionKey<T> | string, value: T): void
  • Détails

    provide() prend deux arguments : la clé, qui peut être une chaîne de caractères ou un symbole, et la valeur à injecter.

    En utilisant TypeScript, la clé peut être un symbole casté en tant que InjectionKey - un type utilitaire fourni par Vue qui étend Symbol, qui peut être utilisé pour synchroniser le type de valeur entre provide() et inject().

    Comme pour les API d'enregistrement des hooks de cycle de vie, provide() doit être appelée de manière synchrone pendant la phase setup() d'un composant.

  • Exemple

    vue
    <script setup>
    import { ref, provide } from 'vue'
    import { fooSymbol } from './injectionSymbols'
    
    // fournit une valeur statique
    provide('foo', 'bar')
    
    // fournit une valeur réactive
    const count = ref(0)
    provide('count', count)
    
    // fournit des clés de symboles
    provide(fooSymbol, count)
    </script>
  • Voir aussi

inject()

Injecte une valeur fournie par un composant ancêtre ou par l'application (via app.provide()).

  • Type :

    ts
    // sans valeur par défaut
    function inject<T>(key: InjectionKey<T> | string): T | undefined
    
    // avec valeur par défaut
    function inject<T>(key: InjectionKey<T> | string, defaultValue: T): T
    
    // en utilisant une fonction factory
    function inject<T>(
      key: InjectionKey<T> | string,
      defaultValue: () => T,
      treatDefaultAsFactory: true
    ): T
  • Détails

    Le premier argument est la clé d'injection. Vue remontera la chaîne des parents pour localiser une valeur fournie avec une clé correspondante. Si plusieurs composants de la chaîne des parents fournissent la même clé, celui qui est le plus proche du composant qui injecte la valeur l'emportera sur ceux qui sont plus haut dans la chaîne. Si aucune valeur avec la clé correspondante n'a été trouvée, inject() renvoie undefined sauf si une valeur par défaut est fournie.

    Le second argument est optionnel et représente la valeur par défaut à utiliser si aucune valeur correspondante n'a été trouvée.

    Il peut aussi être une fonction factory pour retourner des valeurs qui sont coûteuses à créer. Dans ce cas, la valeur true doit être passée comme troisième argument pour indiquer que la fonction doit être utilisée comme une factory au lieu de la valeur elle-même.

    Comme pour les API d'enregistrement des hooks de cycle de vie, inject() doit être appelée de manière synchrone pendant la phase setup() d'un composant.

    En utilisant TypeScript, la clé peut être de type InjectionKey - un type utilitaire fourni par Vue qui étend Symbol, qui peut être utilisé pour synchroniser le type de valeur entre provide() et inject().

  • Exemple

    En supposant qu'un composant parent a fourni des valeurs comme indiqué dans l'exemple précédent concernant provide() :

    vue
    <script setup>
    import { inject } from 'vue'
    import { fooSymbol } from './injectionSymbols'
    
    // injecte une valeur statique par défaut
    const foo = inject('foo')
    
    // injecte une valeur réactive
    const count = inject('count')
    
    // injection avec des clés de symboles
    const foo2 = inject(fooSymbol)
    
    // injection avec une valeur par défaut
    const bar = inject('foo', 'default value')
    
    // injection avec une valeur par défaut via une fonction factory
    const baz = inject('foo', () => new Map())
    
    // injection avec la valeur par défaut de la fonction, en passant le 3ème argument
    const fn = inject('function', () => {}, false)
    </script>
  • Voir aussi

Composition API: Injection de dépendancesa chargé