setContext() и getContext()
Предоставляйте и используйте значения контекста в пределах поддерева компонента
«setContext() и getContext()» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Что такое контекст
Контекст позволяет родительскому компоненту передавать данные всем своим потомкам без последовательной передачи свойств.
Импорт вспомогательных средств
Из svelte.
import { setContext, getContext } from "svelte";Установка в родителе
Вызовите setContext(key, value) в скрипте родительского компонента.
setContext("theme", { color: "dark" });Получение в потомке
Вызовите getContext(key) в любом потомке, чтобы прочитать значение.
const theme = getContext("theme");Ключи
Ключами могут быть строки или символы. Символы предотвращают столкновения.
const themeKey = Symbol("theme");Снимки
Значение, переданное в setContext, захватывается один раз. Для реактивных значений используйте хранилища.
Реактивный контекст
Передайте хранилище через контекст, чтобы включить реактивные обновления во всех потомках.
setContext("user", userStore);Ограничение поддеревом
Контекст доступен только потомкам компонента, который его установил.
Несколько контекстов
Каждый компонент может устанавливать несколько контекстов; потомки могут читать любой из них по ключу.
Варианты использования
Тема, интернационализация, аутентификация, внедрение зависимостей. Всё, что передаётся вниз без передачи каждого значения через свойства.
Сравнение с хранилищами
Хранилища глобальны, а контекст ограничен деревом компонентов, в котором был вызван setContext.
Быстрая проверка
Кто может читать контекст?
Повторение
Используйте setContext(key, val) и getContext(key), чтобы передавать данные через дерево компонентов без свойств.
Часто задаваемые вопросы
Урок «setContext() и getContext()» бесплатный?
Да — полный текст урока «setContext() и getContext()» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «setContext() и getContext()»?
Предоставляйте и используйте значения контекста в пределах поддерева компонента Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.
Сколько времени занимает урок «setContext() и getContext()»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- setContext() и getContext()
- Контекст и хранилища: когда использовать каждый из них
- Типизированный контекст с TypeScript
- Контекст для внедрения зависимостей