Общие данные между макетами
Загружайте данные в родительском макете и обращайтесь к ним в дочерних страницах и макетах
«Общие данные между макетами» — бесплатный урок Sveltejs Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Sveltejs Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Sveltejs Academy содержит 4 уроков всего.
Загрузка данных макетом
+layout.js или +layout.server.js может загружать данные, общие для всех расположенных под ним страниц.
Доступ к данным
Страница получает данные, объединённые из всех макетов-предков и самой страницы.
export let data;
// data has both layout and page propertiesНаследование в компонентах
Используйте $page.data, чтобы получить объединённые данные в любом месте дерева макетов.
import { page } from "$app/stores";
<p>User: {$page.data.user?.name}</p>Аутентификация на верхнем уровне
Загрузите текущего пользователя в корневом макете; каждая страница сможет получить его через $page.data.
Избегайте дублирования
Загрузка данных в самом верхнем макете, которому они нужны, предотвращает повторные запросы на каждой странице.
Данные только для сервера
Для конфиденциальных данных загружайте их в +layout.server.js, чтобы они не попадали на клиент, если только не отображаются.
Потоковая передача
Загрузка данных макетом может передавать объекты Promise потоком так же, как загрузка страницы.
Разрешение конфликтов
Данные страницы переопределяют данные макета, если у них совпадает ключ.
Наследование в TypeScript
Типы данных страницы автоматически включают данные макетов-предков благодаря сгенерированным типам.
Инвалидация
Используйте invalidate, чтобы при необходимости повторно запускать определённые загрузки макетов.
import { invalidate } from "$app/navigation";
invalidate("app:user");Иерархия
Рассматривайте макеты как иерархию данных: корневой — для глобальных данных, разделы — для данных разделов, страницы — для данных страниц.
Быстрая проверка
Как получить данные макета на странице?
Итоги
Загрузки макетов дополняют объединённый объект данных, доступный потомкам через свойство data и $page.data.
Часто задаваемые вопросы
Урок «Общие данные между макетами» бесплатный?
Да — полный текст урока «Общие данные между макетами» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Sveltejs Academy, подпишись на CoddyKit PRO. Курс Sveltejs Academy содержит 4 уроков всего.
Чему я научусь в уроке «Общие данные между макетами»?
Загружайте данные в родительском макете и обращайтесь к ним в дочерних страницах и макетах Ты практикуешь Sveltejs Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Sveltejs Academy?
Предыдущий опыт не требуется. Sveltejs Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Общие данные между макетами»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Sveltejs Academy?
Да. Каждый урок Sveltejs Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Группы макетов с (group)
- Макеты на уровне маршрута
- Выход из макета с +page@route
- Общие данные между макетами