Vue Academy · Lekcja

Właściwości globalne oraz provide/inject we wtyczkach

app.config.globalProperties.$myPlugin, app.provide() do wstrzykiwania oraz rozszerzanie typów TypeScript.

Właściwości globalne oraz provide/inject we wtyczkach to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.

Dwa sposoby udostępniania usług

Wtyczki mogą udostępniać funkcjonalność na dwa sposoby: przez właściwości globalne (klasyczny styl Options API, dostępny przez this.$x) oraz przez provide/inject (styl Composition API). Nowoczesny kod preferuje provide/inject; właściwości globalne pozostają przydatne w bazach kodu korzystających z Options API.

app.config.globalProperties

app.config.globalProperties.$http = client udostępnia this.$http w każdym komponencie Options API. Zgodnie z konwencją należy używać prefiksu $, aby uniknąć konfliktu z danymi komponentu.

import axios from 'axios'

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

Korzystanie z $http w Options API

W komponencie Options API właściwość globalna jest dostępna za pośrednictwem this.

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

Dlaczego Composition API nie może używać this

W <script setup> nie ma obiektu this powiązanego z instancją komponentu. Dlatego this.$http nie działa. Composition API odczytuje zamiast tego wstrzykiwane wartości, co jest zalecanym podejściem.

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

provide we wtyczce

Aby obsługiwać Composition API, wtyczka powinna również wywołać app.provide dla tej samej usługi pod określonym kluczem. Należy udostępnić oba sposoby: właściwość globalną dla Options API oraz provide dla 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
  }
}

inject w Composition API

Komponenty odczytują usługę za pomocą inject(httpKey). Użycie eksportowanego klucza Symbol eliminuje literówki w kluczach tekstowych i umożliwia typowanie.

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

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

Typowane klucze wstrzykiwania z użyciem InjectionKey

Aby uzyskać pełne bezpieczeństwo typów, należy określić typ klucza za pomocą InjectionKey<T>. Wtedy inject automatycznie wywnioskuje prawidłowy typ wartości.

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

Typowanie $http za pomocą rozszerzania modułu

Aby zapewnić bezpieczeństwo typów dla this.$http, należy rozszerzyć interfejs Vue ComponentCustomProperties w pliku .d.ts. Dzięki temu TypeScript zna typ this.$http w całej aplikacji.

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

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

export {}

Gdzie umieścić rozszerzenie modułu

Rozszerzenie musi znajdować się w module (należy zwrócić uwagę na końcowe export {}) i być uwzględnione w pliku tsconfig.json. Należy umieścić je obok wtyczki, aby typy były dołączane do niej podczas publikowania.

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

Właściwości globalne: należy używać oszczędnie

Właściwości globalne są wygodne, ale stanowią ukryte zależności — utrudniają testowanie komponentów i rozumowanie o ich działaniu. Należy preferować provide/inject (jawne i ograniczone do drzewa komponentów). Właściwości globalne warto rezerwować dla rzeczywiście dostępnych w całej aplikacji narzędzi przyjaznych dla Options API.

Obsługa obu podejść

Dopracowana wtyczka obsługuje zarówno Options API, jak i Composition API: ustawia właściwość globalną ORAZ udostępnia wartość przez provide, a także dostarcza rozszerzenie typów zarówno dla właściwości globalnej, jak i typowanego klucza wstrzykiwania. Konsumenci wybierają rozwiązanie odpowiednie dla stylu używanego w ich komponencie.

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

Szybkie sprawdzenie

Proszę sprawdzić zrozumienie właściwości globalnych oraz provide/inject we wtyczkach.

Podsumowanie

W tej lekcji poznali Państwo sposoby udostępniania usług wtyczki:

app.config.globalProperties.$http zapewnia działanie this.$http w Options API
Composition API nie ma this; zamiast tego używa inject
Pełna obsługa wymaga udostępnienia zarówno właściwości globalnej, jak i wartości przez provide
Typowanie this.$http uzyskuje się przez rozszerzenie ComponentCustomProperties
Dla ścieżki inject należy używać typowanego InjectionKey

Często zadawane pytania

Czy lekcja „Właściwości globalne oraz provide/inject we wtyczkach” jest bezpłatna?

Tak — pełny tekst „Właściwości globalne oraz provide/inject we wtyczkach” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Właściwości globalne oraz provide/inject we wtyczkach”?

app.config.globalProperties.$myPlugin, app.provide() do wstrzykiwania oraz rozszerzanie typów TypeScript. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Vue Academy?

Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Właściwości globalne oraz provide/inject we wtyczkach”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?

Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Architektura wtyczek i app.use()
Właściwości globalne oraz provide/inject we wtyczkach
Przykład wtyczki powiadomień i toastów
Publikowanie i typowanie wtyczek Vue

← Powrót do Vue Academy