Provide/Inject sovellustason tilalle
app.provide() globaalille tilalle, teemoitukselle ja i18n:lle sekä Pinian välttäminen yksinkertaisissa tapauksissa.
Provide/Inject sovellustason tilalle on ilmainen Vue Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/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.
Sovellustason provide
Komponenttitason provide-funktion lisäksi voitte tarjota arvon sovellusinstanssissa app.provide-funktiolla. Arvo tulee jokaisen sovelluksen komponentin käyttöön.
const app = createApp(App);
app.provide("appVersion", "1.0.0");Globaalien palvelujen tarjoaminen
Sovellustason provide sopii erinomaisesti singleton-palveluille, kuten todennuspalvelulle, HTTP-asiakasohjelmalle tai lokittajalle eli asioille, joita koko sovellus saattaa tarvita.
import { authService } from "./auth";
app.provide("auth", authService);Globaalin palvelun käyttäminen
Mikä tahansa komponentti voi injektoida palvelun avaimen perusteella missä tahansa puussa ilman propien välittämistä kerroksittain tai ylimääräisiä kytkentöjä.
const auth = inject("auth");
auth.login(credentials);Globaalien arvojen Symbol-avaimet
Sovelluksenlaajuisissa palveluissa viedyt, mieluiten tyypitetyt Symbol-avaimet pitävät injektoinnin turvallisena ja helposti löydettävänä koko koodikannassa.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Hakujärjestys
Kun sekä sovellustason että komponenttitason provide käyttää samaa avainta, lähimpänä oleva tarjoaja voittaa kyseisen komponentin jälkeläisten kohdalla. Sovellustaso toimii globaalina oletuksena.
Paljon lukemista sisältävät tilanteet
Provide/inject toimii erinomaisesti, kun monet komponentit vain lukevat jaettuja tietoja, kuten teemaa, aluetta tai määrityksiä. Käyttäjien ei tarvitse kirjoittaa arvoja, joten malli pysyy yksinkertaisena ja ennakoitavana.
Vertailu Piniaan
Pinia on Vuen virallinen tilanhallintakirjasto. Se tarjoaa kehittäjätyökalut, modulaariset storet, toiminnot, getterit ja aikamatkavirheenkorjauksen, joten se sopii ihanteellisesti monimutkaiseen ja usein muutettavaan globaaliin tilaan.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });Milloin provide/inject riittää
Enimmäkseen vain luettaville jaetuille arvoille provide/inject välttää storen aiheuttaman ylimääräisen rakenteen. Se on kevyempi, sisäänrakennettu ja selkeä vaihtoehto teemalle, i18n:lle tai injektoiduille palveluille.
Milloin kannattaa valita Pinia
Valitkaa Pinia, kun tilaa muutetaan monesta paikasta, se tarvitsee kehittäjätyökaluja, sen on säilyttävä tai siihen liittyy monimutkaista johdettua tietoa. Se keskittää logiikan paremmin kuin hajautetut provide/inject-parit.
Molempien yhdistäminen
Ne eivät sulje toisiaan pois. Voitte käyttää Piniaa sovelluksen tietoihin ja provide/inject-mallia kevyeen komponenttipuun kontekstiin, kuten lomakkeeseen tai käyttöliittymän teemaan.
provide("formContext", { register, errors });Testauksessa huomioitavaa
Kun yksikkötestaatte injektointia käyttävää komponenttia, välittäkää arvo testin mount-asetusten kautta kohdassa global.provide, jotta komponentti saa testiä varten tehdyn korvaavan arvon.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Pikatarkistus
Milloin provide/inject on suositeltavampi kuin Pinia?
Kertaus
Opitte, että app.provide tarjoaa globaalit palvelut jokaiselle komponentille ja että niitä käytetään avaimen perusteella missä tahansa inject-funktion avulla. Provide/inject sopii erityisesti paljon lukemista sisältävään jaettuun kontekstiin, kun taas Pinia sopii monimutkaiseen ja usein muutettavaan globaaliin tilaan, joka tarvitsee kehittäjätyökalujen tuen.
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
Usein kysytyt kysymykset
Onko oppitunti ”Provide/Inject sovellustason tilalle” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Vue Academy-oppimispolun 3 oppituntia, myös oppitunnin “Provide/Inject sovellustason tilalle”. 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 ”Provide/Inject sovellustason tilalle”?
app.provide() globaalille tilalle, teemoitukselle ja i18n:lle sekä Pinian välttäminen yksinkertaisissa tapauksissa. 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 4/4.
Kuinka kauan ”Provide/Inject sovellustason tilalle”-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
- Prop drilling -ongelma
- provide() emokomponenteissa
- inject() lapsikomponenteissa
- Provide/Inject sovellustason tilalle