setContext() i getContext()
Udostępniaj i pobieraj wartości kontekstu ograniczone do poddrzewa komponentu.
setContext() i getContext() to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 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 Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Czym jest kontekst
Kontekst pozwala komponentowi nadrzędnemu przekazywać dane wszystkim potomkom bez przekazywania propsów przez każdy poziom.
Importowanie funkcji pomocniczych
Z svelte.
import { setContext, getContext } from "svelte";Ustawianie w komponencie nadrzędnym
W skrypcie komponentu nadrzędnego należy wywołać setContext(key, value).
setContext("theme", { color: "dark" });Odczyt w komponencie potomnym
W dowolnym komponencie potomnym należy wywołać getContext(key), aby odczytać wartość.
const theme = getContext("theme");Klucze
Kluczami mogą być ciągi znaków lub symbole. Symbole zapobiegają kolizjom.
const themeKey = Symbol("theme");Migawki
Wartość przekazana do setContext jest przechwytywana tylko raz. W przypadku wartości reaktywnych należy używać store’ów.
Reaktywny kontekst
Przekazanie store’a jako kontekstu umożliwia reaktywne aktualizacje we wszystkich komponentach potomnych.
setContext("user", userStore);Zakres ograniczony do poddrzewa
Kontekst jest dostępny wyłącznie potomkom komponentu, który go ustawił.
Wiele kontekstów
Każdy komponent może ustawić wiele kontekstów, a komponenty potomne mogą odczytać dowolny z nich za pomocą klucza.
Przypadki użycia
Motyw, i18n, uwierzytelnianie, wstrzykiwanie zależności. Wszystko, co przepływa w dół bez przekazywania każdego propsa osobno.
W porównaniu ze store’ami
Store’y są globalne, natomiast kontekst ma zakres ograniczony do drzewa komponentów, w którym wywołano setContext.
Szybkie sprawdzenie
Kto może odczytać kontekst?
Podsumowanie
Za pomocą setContext(key, val) i getContext(key) można współdzielić dane w drzewie komponentów bez używania propsów.
Często zadawane pytania
Czy lekcja „setContext() i getContext()” jest bezpłatna?
Tak — pełny tekst „setContext() i getContext()” 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 Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „setContext() i getContext()”?
Udostępniaj i pobieraj wartości kontekstu ograniczone do poddrzewa komponentu. Ćwiczysz Sveltejs 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ąć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs 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 1 z 4.
Ile czasu zajmuje lekcja „setContext() i getContext()”?
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 Sveltejs Academy?
Tak. Każda lekcja Sveltejs 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
- setContext() i getContext()
- Kontekst a store’y: kiedy używać każdego z nich
- Typowany kontekst z TypeScript
- Kontekst do wstrzykiwania zależności