derived() dla store’ów obliczanych
Wyprowadź nowy store, którego wartość jest obliczana na podstawie co najmniej jednego innego store’a.
derived() dla store’ów obliczanych 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.
Działanie derived
derived tworzy nowy store, którego wartość jest obliczana na podstawie co najmniej jednego store'a źródłowego.
Importowanie
Z svelte/store.
import { derived } from "svelte/store";Jedno źródło
Aby wyprowadzić wartość z jednego store'a, należy przekazać go oraz funkcję zwracającą wyliczoną wartość.
export const doubled = derived(count, ($count) => $count * 2);Wiele źródeł
Należy przekazać tablicę store'ów. Funkcja zwrotna otrzyma tablicę ich wartości.
export const total = derived([price, qty], ([$p, $q]) => $p * $q);Asynchroniczny derived
Należy przekazać drugi argument set i wywoływać go asynchronicznie, aby wyprowadzać wartość z asynchronicznego źródła.
derived(userId, ($id, set) => {
fetchUser($id).then(set);
});Wartość początkowa
Asynchroniczne store'y derived przyjmują trzeci argument określający wartość początkową, używaną przed wywołaniem set.
Automatyczne sprzątanie
Podobnie jak inne store'y, derived automatycznie usuwa subskrypcje swoich źródeł.
Łączenie
Store'y derived mogą same służyć jako źródła dla innych store'ów derived.
Memoizacja
Wyprowadzona wartość jest aktualizowana tylko wtedy, gdy zmienią się wartości źródłowe. Działa to podobnie jak selektory z memoizacją.
Używanie w komponentach
Należy korzystać z nich za pomocą skrótu $, tak jak z każdego innego store'a.
<p>Total: {$total}</p>Kiedy używać
Należy używać derived do obliczanego współdzielonego stanu. W przypadku wartości obliczanych lokalnie w komponencie lepiej użyć $:.
Szybkie sprawdzenie
Co zwraca derived?
Podsumowanie
derived tworzy obliczane store'y tylko do odczytu na podstawie jednego lub wielu źródeł. Obsługuje wyprowadzanie wartości synchroniczne i asynchroniczne.
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
- 41
- Lekcje
- 163
Często zadawane pytania
Czy lekcja „derived() dla store’ów obliczanych” jest bezpłatna?
Tak — pełny tekst „derived() dla store’ów obliczanych” 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 „derived() dla store’ów obliczanych”?
Wyprowadź nowy store, którego wartość jest obliczana na podstawie co najmniej jednego innego store’a. Ć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 „derived() dla store’ów obliczanych”?
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
- derived() dla store’ów obliczanych
- Niestandardowy wzorzec store’a z subscribe/set/update
- Readable z Writable
- Kontrakty store’ów i interoperacyjność