Vue Academy · Oppitunti

Globaalit ominaisuudet ja provide/inject liitännäisissä

app.config.globalProperties.$myPlugin, app.provide() injektointiin ja TypeScript-laajennus

Oppitunti 2/413 vaihetta

Globaalit ominaisuudet ja provide/inject liitännäisissä on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Vue Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Kaksi tapaa tarjota palveluita

Pluginit voivat jakaa toiminnallisuutta kahdella tavalla: globaaleina ominaisuuksina (klassinen Options API -tyyli, käytettävissä this.$x-kautta) ja provide/inject-mekanismina (Composition API -tyyli). Nykyaikaisessa koodissa suositaan provide/inject-mekanismia, mutta globaalit ominaisuudet ovat edelleen hyödyllisiä Options API -koodikannoissa.

app.config.globalProperties

app.config.globalProperties.$http = client tuo this.$http-ominaisuuden käytettäväksi jokaisessa Options API -komponentissa. Ominaisuuden nimeen lisätään yleensä etuliitteeksi $, jotta se ei sekoitu komponentin dataan.

import axios from 'axios'

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

$http:n käyttäminen Options APIssa

Options API -komponentin sisällä globaali ominaisuus on käytettävissä this-kautta.

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

Miksi Composition API ei voi käyttää this-arvoa

<script setup>-lohkossa ei ole komponentti-instanssiin sidottua this-arvoa. Siksi this.$http ei toimi. Composition API lukee sen sijaan injektoituja arvoja, mikä on suositeltu lähestymistapa.

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

Providen käyttäminen pluginissa

Jotta Composition API olisi tuettu, pluginin tulee tarjota sama palvelu myös app.provide-kutsulla avaimen alle. Tarjotkaa molemmat: globaali ominaisuus Options APIa varten ja provide Composition APIa varten.

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

Injectin käyttäminen Composition APIssa

Komponentit lukevat palvelun kutsulla inject(httpKey). Viedyn Symbol-avaimen käyttäminen ehkäisee merkkijonoihin liittyviä kirjoitusvirheitä ja mahdollistaa tyypityksen.

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

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

Tyypitetyt injektointiavaimet InjectionKeyn avulla

Saavuttaaksenne täyden tyyppiturvallisuuden tyypittäkää avain muodossa InjectionKey<T>. Tällöin inject päättelee oikean arvotyypin automaattisesti.

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

this.$http:n tyypittäminen moduulilaajennuksella

Jotta this.$http olisi tyyppiturvallinen, laajentakaa Vuen ComponentCustomProperties-rajapintaa .d.ts-tiedostossa. TypeScript tietää tällöin this.$http-arvon tyypin kaikkialla.

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

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

export {}

Missä laajennus sijaitsee

Laajennuksen on oltava moduuli (huomioikaa lopussa oleva export {}), ja sen on sisällyttävä tsconfig.json-asetuksiin. Sijoittakaa se pluginin yhteyteen, jotta tyypit kulkevat pluginin mukana sitä julkaistaessa.

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

Käyttäkää globaaleja ominaisuuksia säästeliäästi

Globaalit ominaisuudet ovat käteviä, mutta ne luovat piilossa olevia riippuvuuksia — niiden vuoksi komponentteja on vaikeampi testata ja ymmärtää. Suosikaa provide/inject-mekanismia (eksplisiittinen ja komponenttipuuhun rajattu). Varatkaa globaalit ominaisuudet aidosti koko sovelluksen laajuisiin, Options API -ystävällisiin apuohjelmiin.

Molempien API-tyylien tukeminen

Huolellisesti toteutettu plugin tukee sekä Options APIa että Composition APIa: asettakaa globaali ominaisuus JA tarjotkaa arvo, ja julkaiskaa molempia varten tyyppilaajennus — sekä globaalille ominaisuudelle että tyypitetylle injektointiavaimelle. Käyttäjät voivat valita komponenttinsa tyyliin sopivan tavan.

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

Pikatesti

Testatkaa, miten hyvin ymmärrätte pluginien globaalit ominaisuudet ja provide/inject-mekanismin.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte tarjoamaan pluginien palveluita:

app.config.globalProperties.$http mahdollistaa Options APIn this.$http-ominaisuuden
Composition APIssa ei ole this-arvoa, vaan siinä käytetään inject-kutsua
Tarjotkaa sekä globaali ominaisuus että tarjottu arvo, jotta molemmat käyttötavat ovat tuettuja
Tyypittäkää this.$http laajentamalla ComponentCustomProperties-rajapintaa
Käyttäkää inject-polussa tyypitettyä InjectionKey-avainta

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 42
Oppitunnit: 156

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Globaalit ominaisuudet ja provide/inject liitännäisissä” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Globaalit ominaisuudet ja provide/inject liitännäisissä”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Vue Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Globaalit ominaisuudet ja provide/inject liitännäisissä”?

app.config.globalProperties.$myPlugin, app.provide() injektointiin ja TypeScript-laajennus Harjoittelet Vue Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Vue Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Vue Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Globaalit ominaisuudet ja provide/inject liitännäisissä”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Vue Academy-oppitunnilla?

Kyllä. Jokainen Vue Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Liitännäisarkkitehtuuri ja app.use()
Globaalit ominaisuudet ja provide/inject liitännäisissä
Ilmoitus- ja toast-liitännäisesimerkki
Vue-liitännäisten julkaiseminen ja tyypitys

← Takaisin: Vue Academy