Vue Academy · leksjon

Globale egenskaper og provide/inject i plugins

app.config.globalProperties.$myPlugin, app.provide() for injection og TypeScript-augmentering.

Leksjon 2 av 413 trinn

Globale egenskaper og provide/inject i plugins er en gratis leksjon i Vue Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Vue Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Vue Academy inneholder totalt 4 leksjoner.

To måter å eksponere tjenester på

Plugins kan dele funksjonalitet på to måter: globale egenskaper (den klassiske Options API-stilen, tilgjengelig via this.$x) og provide/inject (Composition API-stilen). Moderne kode foretrekker provide/inject, mens globale egenskaper fortsatt er nyttige i kodebaser som bruker Options API.

app.config.globalProperties

app.config.globalProperties.$http = client gjør this.$http tilgjengelig i alle komponenter som bruker Options API. Konvensjonen er å bruke prefikset $ for å unngå kollisjoner med komponentdata.

import axios from 'axios'

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

Bruk av $http i Options API

Inne i en komponent som bruker Options API er den globale egenskapen tilgjengelig via this.

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

Hvorfor Composition API ikke kan bruke this

I <script setup> finnes det ingen this som er bundet til komponentinstansen. Derfor fungerer ikke this.$http. Composition API leser i stedet injiserte verdier, noe som er den anbefalte fremgangsmåten.

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

Bruk provide i pluginen

For å støtte Composition API bør pluginen også bruke app.provide til å eksponere den samme tjenesten under en nøkkel. Eksponer begge deler: en global egenskap for Options API og en provide-verdi for 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
  }
}

Bruk inject i Composition API

Komponenter leser tjenesten med inject(httpKey). Den eksporterte Symbol-nøkkelen unngår skrivefeil i strenger og muliggjør typing.

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

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

Typede injeksjonsnøkler med InjectionKey

For full typesikkerhet typer De nøkkelen med InjectionKey<T>. Da utleder inject automatisk riktig verditype.

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

Typing av $http med modulaugmentering

For å gjøre this.$http typesikker utvider De Vues ComponentCustomProperties-grensesnitt i en .d.ts-fil. TypeScript kjenner da typen til this.$http overalt.

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

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

export {}

Hvor augmenteringen skal ligge

Augmenteringen må være en modul (legg merke til det avsluttende export {}) og inkluderes av Deres tsconfig.json. Plasser den ved siden av pluginen, slik at typene følger med når pluginen publiseres.

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

Globale egenskaper: Bruk dem med måte

Globale egenskaper er praktiske, men skjulte avhengigheter — de gjør komponenter vanskeligere å teste og forstå. Foretrekk provide/inject (eksplisitt og avgrenset til komponenttreet). Reserver globale egenskaper for verktøy som virkelig gjelder hele appen og passer godt med Options API.

Støtte for begge verdener

En gjennomarbeidet plugin støtter både Options API og Composition API: angi en global egenskap OG eksponer verdien med provide, og lever typeaugmentering for både den globale egenskapen og en typet injeksjonsnøkkel. Brukerne kan velge det som passer komponentstilen deres.

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

Hurtigsjekk

Test forståelsen Deres av globale egenskaper og provide/inject i plugins.

Besvar den i den interaktive leksjonen

Oppsummering

De lærte hvordan plugin-tjenester eksponeres:

app.config.globalProperties.$http gir Options API tilgang til this.$http
Composition API har ingen this; i stedet brukes inject
Eksponer både en global egenskap og en provide-verdi for full dekning
Typ this.$http ved å utvide ComponentCustomProperties
Bruk en typet InjectionKey for inject-banen

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 42
Leksjoner: 156

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Globale egenskaper og provide/inject i plugins» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Vue Academy, inkludert «Globale egenskaper og provide/inject i plugins», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Vue Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Globale egenskaper og provide/inject i plugins»?

app.config.globalProperties.$myPlugin, app.provide() for injection og TypeScript-augmentering. Du øver på Vue Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Vue Academy?

Ingen tidligere erfaring er nødvendig. Vue Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Globale egenskaper og provide/inject i plugins»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Vue Academy-leksjonen?

Ja. Alle Vue Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

Plugin-arkitektur og app.use()
Globale egenskaper og provide/inject i plugins
Eksempel på notification- og toast-plugin
Publisering og typing av Vue-plugins

← Tilbake til Vue Academy