Vue Academy · Lektion

Globale Eigenschaften und provide/inject in Plugins

app.config.globalProperties.$myPlugin, app.provide() zur Injection und TypeScript-Erweiterung

Globale Eigenschaften und provide/inject in Plugins ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Zwei Möglichkeiten, Services bereitzustellen

Plugins können Funktionen auf zwei Arten gemeinsam nutzen: über globale Eigenschaften (der klassische Stil der Options API, Zugriff über this.$x) und über provide/inject (der Stil der Composition API). In modernem Code wird provide/inject bevorzugt; globale Eigenschaften bleiben für Codebasen mit Options API nützlich.

app.config.globalProperties

app.config.globalProperties.$http = client macht this.$http in jeder Komponente der Options API verfügbar. Üblicherweise wird ein Präfix mit $ verwendet, um Konflikte mit den Komponentendaten zu vermeiden.

import axios from 'axios'

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

$http in der Options API verwenden

Innerhalb einer Komponente der Options API ist die globale Eigenschaft über this erreichbar.

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

Warum die Composition API this nicht verwenden kann

In <script setup> gibt es kein an die Komponenteninstanz gebundenes this. Daher funktioniert this.$http nicht. Die Composition API liest stattdessen injizierte Werte aus, was der empfohlene Ansatz ist.

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

Im Plugin bereitstellen

Um die Composition API zu unterstützen, sollte das Plugin denselben Service zusätzlich mit app.provide unter einem Schlüssel bereitstellen. Stellen Sie beides bereit: eine globale Eigenschaft für die Options API und einen bereitgestellten Wert für die Composition API.

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
  }
}

In der Composition API injizieren

Komponenten lesen den Service mit inject(httpKey) aus. Der exportierte Symbol-Schlüssel verhindert Tippfehler bei Zeichenfolgen und ermöglicht eine Typisierung.

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

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

Typisierte Injection-Keys mit InjectionKey

Für vollständige Typsicherheit typisieren Sie den Schlüssel mit InjectionKey<T>. Anschließend leitet inject den korrekten Werttyp automatisch ab.

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

$http mit Module Augmentation typisieren

Damit this.$http typsicher ist, erweitern Sie die Vue-Schnittstelle ComponentCustomProperties in einer .d.ts-Datei. TypeScript kennt dann überall den Typ von this.$http.

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

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

export {}

Wo die Augmentation liegt

Die Augmentation muss ein Modul sein (beachten Sie das abschließende export {}) und in Ihrer tsconfig.json enthalten sein. Platzieren Sie sie neben Ihrem Plugin, damit die Typen beim Veröffentlichen mitgeliefert werden.

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

Globale Eigenschaften sparsam verwenden

Globale Eigenschaften sind praktisch, stellen aber verborgene Abhängigkeiten dar — dadurch werden Komponenten schwieriger zu testen und nachzuvollziehen. Bevorzugen Sie provide/inject (explizit und auf den Komponentenbaum beschränkt). Verwenden Sie globale Eigenschaften nur für wirklich app-weite Hilfsfunktionen, die für die Options API geeignet sind.

Beide Welten unterstützen

Ein ausgereiftes Plugin unterstützt sowohl die Options API als auch die Composition API: Setzen Sie eine globale Eigenschaft UND stellen Sie den Wert bereit, und liefern Sie eine Typ-Augmentation sowohl für die globale Eigenschaft als auch für einen typisierten Injection-Key mit. Verwender wählen den Ansatz, der zu ihrem Komponentenstil passt.

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

Kurzer Test

Testen Sie Ihr Verständnis globaler Eigenschaften und von provide/inject in Plugins.

Zusammenfassung

Sie haben gelernt, wie Plugin-Services bereitgestellt werden:

app.config.globalProperties.$http stellt für die Options API this.$http bereit
Die Composition API verfügt über kein this; sie verwendet stattdessen inject
Stellen Sie sowohl eine globale Eigenschaft als auch einen bereitgestellten Wert bereit, um beide APIs abzudecken
Typisieren Sie this.$http, indem Sie ComponentCustomProperties erweitern
Verwenden Sie für den Inject-Pfad einen typisierten InjectionKey

Häufig gestellte Fragen

Ist die Lektion „Globale Eigenschaften und provide/inject in Plugins“ kostenlos?

Ja — der vollständige Text von „Globale Eigenschaften und provide/inject in Plugins“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Globale Eigenschaften und provide/inject in Plugins“?

app.config.globalProperties.$myPlugin, app.provide() zur Injection und TypeScript-Erweiterung Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Vue Academy zu starten?

Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Globale Eigenschaften und provide/inject in Plugins“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?

Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

Plugin-Architektur und app.use()
Globale Eigenschaften und provide/inject in Plugins
Beispiel für ein Benachrichtigungs- und Toast-Plugin
Vue-Plugins veröffentlichen und typisieren

← Zurück zu Vue Academy