Vue Academy · Leçon

Propriétés globales et provide/inject dans les plugins

app.config.globalProperties.$myPlugin, app.provide() pour l’injection et extension TypeScript

Leçon 2 sur 413 étapes

Propriétés globales et provide/inject dans les plugins est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 2 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 Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Deux façons d’exposer des services

Les extensions peuvent partager des fonctionnalités de deux façons : les propriétés globales (le style classique de l’API Options, accessibles via this.$x) et provide/l’injection (le style de l’API de composition). Le code moderne privilégie provide et l’injection ; les propriétés globales restent utiles dans les bases de code utilisant l’API Options.

app.config.globalProperties

app.config.globalProperties.$http = client rend this.$http disponible dans chaque composant utilisant l’API Options. La convention consiste à préfixer le nom par $ pour éviter les conflits avec les données du composant.

import axios from 'axios'

export default {
  install(app, options) {
    const http = axios.create({ baseURL: options.baseURL })
    app.config.globalProperties.$http = http
  }
}

Utiliser $http dans l’API Options

Dans un composant utilisant l’API Options, la propriété globale est accessible via this.

export default {
  async created() {
    const res = await this.$http.get('/users')
    this.users = res.data
  },
  data() {
    return { users: [] }
  }
}

Pourquoi l’API de composition ne peut pas utiliser this

Dans <script setup>, aucun this n’est lié à l’instance du composant. this.$http ne fonctionne donc pas. L’API de composition lit plutôt les valeurs injectées, ce qui est l’approche recommandée.

<script setup>
// this is undefined here, so this.$http is NOT available
// use inject() instead
</script>

Utiliser provide dans l’extension

Pour prendre en charge l’API de composition, l’extension doit également fournir le même service avec app.provide, sous une clé. Fournissez les deux : une propriété globale pour l’API Options et une valeur fournie pour l’API de composition.

export const httpKey = Symbol('http')

export default {
  install(app, options) {
    const http = createHttp(options)
    app.config.globalProperties.$http = http // Options API
    app.provide(httpKey, http)               // Composition API
  }
}

Injecter dans l’API de composition

Les composants lisent le service avec inject(httpKey). L’utilisation de la clé Symbol exportée évite les fautes de frappe dans les chaînes et permet le typage.

<script setup>
import { inject } from 'vue'
import { httpKey } from './plugins/http'

const http = inject(httpKey)
const res = await http.get('/profile')
</script>

Clés d’injection typées avec InjectionKey

Pour une sécurité de typage complète, typez la clé avec InjectionKey<T>. inject déduit alors automatiquement le type de valeur correct.

import type { InjectionKey } from 'vue'
import type { AxiosInstance } from 'axios'

export const httpKey: InjectionKey<AxiosInstance> =
  Symbol('http')

// inject(httpKey) is now typed as AxiosInstance | undefined

Typage de $http avec l’augmentation de module

Pour rendre this.$http sûr du point de vue du typage, augmentez l’interface ComponentCustomProperties de Vue dans un fichier .d.ts. TypeScript connaît alors le type de this.$http partout.

// shims.d.ts
import type { AxiosInstance } from 'axios'

declare module 'vue' {
  interface ComponentCustomProperties {
    $http: AxiosInstance
  }
}

export {}

Emplacement de l’augmentation

L’augmentation doit se trouver dans un module (notez le export {} final) et être incluse par votre tsconfig.json. Placez-la à côté de votre extension afin que les types l’accompagnent lors de sa publication.

// tsconfig.json (excerpt)
{
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
}

Propriétés globales : à utiliser avec parcimonie

Les propriétés globales sont pratiques, mais constituent des dépendances cachées : elles rendent les composants plus difficiles à tester et à comprendre. Préférez provide/inject (explicite et limité à l’arbre). Réservez les propriétés globales aux utilitaires véritablement disponibles dans toute l’application et adaptés à l’API Options.

Prendre en charge les deux approches

Une extension soignée prend en charge les API Options et de composition : définissez une propriété globale AND fournissez la valeur, puis fournissez une augmentation de types pour la propriété globale et une clé d’injection typée. Les utilisateurs choisissent ce qui correspond le mieux au style de leur composant.

install(app, options) {
  const service = build(options)
  app.config.globalProperties.$service = service
  app.provide(serviceKey, service)
}

Vérification rapide

Vérifiez votre compréhension des propriétés globales et de provide/inject dans les extensions.

Réponds-y dans la leçon interactive

Récapitulatif

Vous avez appris à exposer des services d’extension :

app.config.globalProperties.$http alimente le this.$http de l’API Options
L’API de composition ne possède pas de this ; elle utilise plutôt inject
Fournissez à la fois une propriété globale et une valeur fournie pour une couverture complète
Typez this.$http en augmentant ComponentCustomProperties
Utilisez InjectionKey typé pour le chemin d’injection

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Propriétés globales et provide/inject dans les plugins » est-elle gratuite ?

Oui — le texte complet de « Propriétés globales et provide/inject dans les plugins » 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 Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Propriétés globales et provide/inject dans les plugins » ?

app.config.globalProperties.$myPlugin, app.provide() pour l’injection et extension TypeScript Tu pratiques Vue 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 Vue Academy ?

Aucune expérience préalable n'est requise. Vue 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 2 sur 4.

Combien de temps prend la leçon « Propriétés globales et provide/inject dans les plugins » ?

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 Vue Academy ?

Oui. Chaque leçon Vue 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

Architecture des plugins et app.use()
Propriétés globales et provide/inject dans les plugins
Exemple de plugin de notifications et de toasts
Publier et typer des plugins Vue

← Retour à Vue Academy