0Pricing
Vue Academy · Lekcja

inject() w komponentach potomnych

inject() z wartościami domyślnymi, wymagane wstrzykiwanie, klucze Symbol do przestrzeni nazw.

inject() w komponentach potomnych to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 3 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.

Funkcja inject

inject pobiera wartość udostępnioną przez przodka, wyszukując ją na podstawie tego samego klucza. Należy wywołać ją w <script setup>.

import { inject } from "vue";
const theme = inject("theme");

Reaktywność zostaje zachowana

Jeśli przodek udostępnił ref, wstrzyknięta wartość jest tym samym ref. Odczyt theme.value pozostaje reaktywny i jest aktualizowany po zmianie wartości przez providera.

const theme = inject("theme");
// in template: {{ theme }} (auto-unwrapped)

Udostępnianie wartości domyślnej

Jeśli żaden przodek nie udostępnił danego klucza, inject zwraca undefined. Należy przekazać drugi argument jako wartość domyślną, aby komponent mógł działać poprawnie również w takiej sytuacji.

const theme = inject("theme", "light");
// "light" used when nothing was provided

Wartości domyślne tworzone przez fabrykę

W przypadku obiektów lub kosztownych w tworzeniu wartości domyślnych należy przekazać funkcję fabrykującą i ustawić trzeci argument na true. Dzięki temu wartość domyślna zostanie utworzona tylko wtedy, gdy będzie potrzebna.

const config = inject("config", () => ({ retries: 3 }), true);

Wstrzykiwanie akcji

Jeśli provider udostępnił również funkcję, należy wstrzyknąć ją w ten sam sposób i wywołać, aby zażądać zmian — to provider zarządza modyfikowaniem stanu.

const updateName = inject("updateName");
updateName("Grace");

Wstrzykiwanie obiektu store

Jeśli provider połączył stan i akcje, należy wstrzyknąć cały obiekt i wyodrębnić z niego potrzebne elementy.

const { user, updateName } = inject("userStore");

Bezpieczne typowanie wstrzykiwania w TypeScript

Vue udostępnia InjectionKey<T>, aby zapewnić bezpieczeństwo typów podczas wstrzykiwania. Odpowiednio typowany klucz informuje TypeScript dokładnie o kształcie wstrzykiwanej wartości.

import type { InjectionKey, Ref } from "vue";
export const themeKey: InjectionKey<Ref<string>> = Symbol("theme");

Używanie typowanego klucza

Dane należy udostępniać i wstrzykiwać za pomocą typowanego klucza. TypeScript może teraz wywnioskować typ wartości i wykrywać niezgodności.

provide(themeKey, theme);          // theme: Ref<string>
const theme = inject(themeKey);    // inferred Ref<string> | undefined

Klucze Symbol zapewniające unikalność

Użycie elementu Symbol jako klucza, często w połączeniu z InjectionKey, gwarantuje brak kolizji ciągów znaków między niezależnymi providerami w dużej bazie kodu.

export const authKey = Symbol("auth") as InjectionKey<AuthService>;

Obsługa brakujących providerów

W rygorystycznych konfiguracjach można zgłosić wyjątek, gdy brakuje wymaganego wstrzyknięcia. Pozwala to wcześniej wykrywać błędy konfiguracji zamiast po cichu używać wartości undefined.

const auth = inject(authKey);
if (!auth) throw new Error("auth provider missing");

Wstrzykiwanie w dowolnym miejscu poddrzewa

Komponent może użyć inject niezależnie od swojej głębokości, o ile któryś z jego przodków udostępnił dany klucz. Komponenty pośrednie pozostają nietknięte — na tym właśnie polega provide/inject.

Szybkie sprawdzenie

Co zwraca inject("theme", "light"), gdy nie istnieje żaden provider?

Podsumowanie

Nauczyli się Państwo, że inject(key) odczytuje udostępnioną wartość, zachowując reaktywność refów. Należy przekazać wartość domyślną lub fabrykę, aby zapewnić bezpieczne działanie zastępcze, oraz używać InjectionKey<T> z kluczami Symbol, aby uzyskać bezpieczne typowanie i uniknąć kolizji podczas wstrzykiwania.

Często zadawane pytania

Czy lekcja „inject() w komponentach potomnych” jest bezpłatna?

Tak — pełny tekst „inject() w komponentach potomnych” 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 „inject() w komponentach potomnych”?

inject() z wartościami domyślnymi, wymagane wstrzykiwanie, klucze Symbol do przestrzeni nazw. Ć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 3 z 4.

Ile czasu zajmuje lekcja „inject() w komponentach potomnych”?

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

  1. Problem prop drilling
  2. provide() w komponentach rodzica
  3. inject() w komponentach potomnych
  4. Provide/Inject dla stanu na poziomie aplikacji
← Powrót do Vue Academy