derived() для вычисляемых хранилищ
Получайте новое хранилище, значение которого вычисляется из одного или нескольких других хранилищ
«derived() для вычисляемых хранилищ» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Что делает derived
derived создаёт новое хранилище, значение которого вычисляется из одного или нескольких исходных хранилищ.
Импорт
Импортируйте из svelte/store.
import { derived } from "svelte/store";Один источник
Создайте производное хранилище из одного хранилища: передайте его и функцию, возвращающую производное значение.
export const doubled = derived(count, ($count) => $count * 2);Несколько источников
Передайте массив хранилищ; обратный вызов получит массив их значений.
export const total = derived([price, qty], ([$p, $q]) => $p * $q);Асинхронное производное хранилище
Передайте вторым аргументом set и вызывайте его асинхронно, чтобы получить значение из асинхронного источника.
derived(userId, ($id, set) => {
fetchUser($id).then(set);
});Начальное значение
Асинхронные производные хранилища принимают третий аргумент — начальное значение, которое используется до вызова set.
Автоматическая очистка
Как и другие хранилища, derived автоматически очищает подписки на свои источники.
Цепочки
Производные хранилища сами могут служить источниками для других производных хранилищ.
Мемоизация
Производное значение обновляется только при изменении значений источников. Это эквивалентно мемоизированным селекторам.
Использование в компонентах
Получайте значение с помощью сокращённой записи $, как у любого другого хранилища.
<p>Total: {$total}</p>Когда использовать
Используйте derived для вычисляемого общего состояния, а для вычисляемых значений внутри компонента предпочитайте $:.
Быстрая проверка
Что возвращает derived?
Итоги
derived создаёт вычисляемые хранилища только для чтения из одного или нескольких источников. Поддерживаются синхронные и асинхронные вычисления.
Часто задаваемые вопросы
Урок «derived() для вычисляемых хранилищ» бесплатный?
Да — полный текст урока «derived() для вычисляемых хранилищ» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «derived() для вычисляемых хранилищ»?
Получайте новое хранилище, значение которого вычисляется из одного или нескольких других хранилищ Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «derived() для вычисляемых хранилищ»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- derived() для вычисляемых хранилищ
- Шаблон пользовательского хранилища с subscribe/set/update
- Readable из Writable
- Контракты хранилищ и совместимость