Vue Academy · Lektion

Globala egenskaper och provide/inject i plugins

app.config.globalProperties.$myPlugin, app.provide() för injicering och TypeScript-augmentation.

Lektion 2 av 413 steg

Globala egenskaper och provide/inject i plugins är en gratis lektion i Vue Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Vue Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Vue Academy innehåller totalt 4 lektioner.

Två sätt att exponera tjänster

Plugin kan dela funktionalitet på två sätt: globala egenskaper, den klassiska stilen i Options API som nås via this.$x, och provide/inject, stilen i Composition API. Modern kod föredrar provide/inject, medan globala egenskaper fortfarande är användbara i kodbaser som använder Options API.

app.config.globalProperties

app.config.globalProperties.$http = client gör this.$http tillgängligt i alla komponenter som använder Options API. Konventionen är att använda prefixet $ för att undvika kollisioner med komponentens data.

import axios from 'axios'

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

Använda $http i Options API

Inuti en komponent som använder Options API nås den globala egenskapen via this.

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

Varför Composition API inte kan använda this

I <script setup> finns inget this som är bundet till komponentinstansen. Därför fungerar inte this.$http. Composition API läser i stället injicerade värden, vilket är den rekommenderade metoden.

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

Tillhandahålla tjänsten i pluginet

För att stödja Composition API bör pluginet också tillhandahålla samma tjänst med app.provide under en nyckel. Tillhandahåll båda: en global egenskap för Options API och ett tillhandahållet värde för 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
  }
}

Injicera i Composition API

Komponenter läser tjänsten med inject(httpKey). Om ni använder den exporterade Symbol-nyckeln undviker ni stavfel i strängar och får dessutom typstöd.

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

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

Typade injektionsnycklar med InjectionKey

För fullständig typsäkerhet skriver ni nyckeln med InjectionKey<T>. Då härleder inject automatiskt rätt typ för värdet.

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

Typa $http med modulutvidgning

För att göra this.$http typsäkert utökar ni Vues gränssnitt ComponentCustomProperties i en .d.ts-fil. Då känner TypeScript till typen för this.$http överallt.

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

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

export {}

Var modulutvidgningen finns

Utvidgningen måste vara en modul, vilket markeras av det avslutande export {}, och inkluderas av er tsconfig.json. Placera den bredvid pluginet så att typerna följer med när det publiceras.

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

Globala egenskaper: använd sparsamt

Globala egenskaper är praktiska men utgör dolda beroenden — de gör komponenter svårare att testa och förstå. Föredra provide/inject, som är explicit och avgränsat till komponentträdet. Använd globala egenskaper endast för verktyg som verkligen gäller hela appen och passar Options API.

Stöd för båda världarna

Ett välutformat plugin stöder både Options API och Composition API: ange en global egenskap OCH tillhandahåll värdet, och skicka med typutvidgning för både den globala egenskapen och en typad injektionsnyckel. Användare kan välja det som passar komponentens stil bäst.

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

Snabbtest

Testa era kunskaper om globala egenskaper och provide/inject i plugin.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni lärde er hur plugin exponerar tjänster:

app.config.globalProperties.$http möjliggör this.$http i Options API
Composition API har inget this utan använder inject i stället
Tillhandahåll både en global egenskap och ett tillhandahållet värde för full täckning
Typa this.$http genom att utöka ComponentCustomProperties
Använd en typad InjectionKey för inject-vägen

Gratis att börja

Lär dig HTML med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 42
Lektioner: 156

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Globala egenskaper och provide/inject i plugins” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Vue Academy, inklusive ”Globala egenskaper och provide/inject i plugins”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Vue Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Globala egenskaper och provide/inject i plugins”?

app.config.globalProperties.$myPlugin, app.provide() för injicering och TypeScript-augmentation. Ni övar på Vue Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig Vue Academy?

Du behöver inga förkunskaper. Utbildningen i Vue Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Globala egenskaper och provide/inject i plugins”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här Vue Academy-lektionen?

Ja. Varje Vue Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Pluginarkitektur och app.use()
Globala egenskaper och provide/inject i plugins
Exempel på notis- och toast-plugin
Publicera och typa Vue-plugins

← Tillbaka till Vue Academy