Provide/Inject dla stanu na poziomie aplikacji
app.provide() dla stanu globalnego, motywów i i18n oraz unikanie Pinia w prostych przypadkach.
Provide/Inject dla stanu na poziomie aplikacji to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 4 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.
provide na poziomie aplikacji
Oprócz komponentowego provide można udostępniać dane na instancji aplikacji za pomocą app.provide. Wartość staje się dostępna dla każdego komponentu w aplikacji.
const app = createApp(App);
app.provide("appVersion", "1.0.0");Udostępnianie usług globalnych
Provide na poziomie aplikacji idealnie nadaje się do singletonów, takich jak usługa uwierzytelniania, klient HTTP czy logger — czyli elementów, których może potrzebować cała aplikacja.
import { authService } from "./auth";
app.provide("auth", authService);Korzystanie z usługi globalnej
Dowolny komponent może wstrzyknąć usługę za pomocą klucza, niezależnie od miejsca w drzewie, bez przekazywania propsów przez wiele warstw i dodatkowego konfigurowania.
const auth = inject("auth");
auth.login(credentials);Klucze Symbol dla wartości globalnych
W przypadku usług dostępnych w całej aplikacji wyeksportowane klucze Symbol, najlepiej odpowiednio typowane, zapewniają bezpieczne wstrzykiwanie i ułatwiają odnajdywanie zależności w całej bazie kodu.
// keys.ts
export const authKey: InjectionKey<AuthService> = Symbol("auth");
// main.ts
app.provide(authKey, authService);Kolejność wyszukiwania
Gdy zarówno provide na poziomie aplikacji, jak i provide na poziomie komponentu używają tego samego klucza, dla potomków tego komponentu obowiązuje najbliższy provider. Provide na poziomie aplikacji pełni funkcję globalnej wartości zastępczej.
Scenariusze z przewagą odczytu
Provide/inject doskonale sprawdza się, gdy wiele komponentów jedynie odczytuje współdzielone dane, takie jak motyw, ustawienia regionalne czy konfiguracja. Komponenty korzystające z tych danych nie muszą ich modyfikować, dzięki czemu wzorzec pozostaje prosty i przewidywalny.
Porównanie z Pinia
Pinia jest oficjalną biblioteką zarządzania stanem Vue. Oferuje narzędzia deweloperskie, modułowe store'y, akcje, gettery i debugowanie z użyciem podróży w czasie — idealne w przypadku złożonego, często modyfikowanego stanu globalnego.
import { defineStore } from "pinia";
export const useAuth = defineStore("auth", { /* ... */ });Kiedy provide/inject wystarcza
W przypadku współdzielonych wartości używanych głównie do odczytu provide/inject pozwala uniknąć narzutu związanego ze store'em. To lżejsze, wbudowane rozwiązanie, które dobrze sprawdza się w przypadku motywu, i18n lub wstrzykiwanych usług.
Kiedy sięgnąć po Pinia
Pinia jest dobrym wyborem, gdy stan jest modyfikowany z wielu miejsc, wymaga narzędzi deweloperskich, musi być utrwalany lub zawiera złożone dane pochodne. Lepiej centralizuje logikę niż rozproszone pary provide/inject.
Łączenie obu rozwiązań
Te rozwiązania nie wykluczają się wzajemnie. Można używać Pinia do danych aplikacji, a provide/inject do lekkiego kontekstu drzewa komponentów, takiego jak formularz lub motyw interfejsu.
provide("formContext", { register, errors });Uwagi dotyczące testowania
Podczas testowania jednostkowego komponentu, który korzysta z inject, należy dostarczyć wartość za pomocą opcji montowania testu global.provide, aby komponent otrzymał atrapę.
mount(MyComponent, {
global: { provide: { auth: fakeAuth } }
});Szybkie sprawdzenie
Kiedy provide/inject jest lepszym wyborem niż Pinia?
Podsumowanie
Nauczyli się Państwo, że app.provide udostępnia usługi globalne każdemu komponentowi, który może pobrać je w dowolnym miejscu za pomocą klucza i funkcji inject. Provide/inject najlepiej sprawdza się w przypadku współdzielonego kontekstu używanego głównie do odczytu, natomiast Pinia jest odpowiednia dla złożonego, często modyfikowanego stanu globalnego z obsługą narzędzi deweloperskich.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Provide/Inject dla stanu na poziomie aplikacji” jest bezpłatna?
Tak — pełny tekst „Provide/Inject dla stanu na poziomie aplikacji” 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 „Provide/Inject dla stanu na poziomie aplikacji”?
app.provide() dla stanu globalnego, motywów i i18n oraz unikanie Pinia w prostych przypadkach. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Provide/Inject dla stanu na poziomie aplikacji”?
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
- Problem prop drilling
- provide() w komponentach rodzica
- inject() w komponentach potomnych
- Provide/Inject dla stanu na poziomie aplikacji