Datos compartidos entre layouts
Cargue datos en un layout padre y acceda a ellos en páginas y layouts hijo
Datos compartidos entre layouts es una lección gratuita de Sveltejs Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Sveltejs Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Sveltejs Academy incluye 4 lecciones en total.
Cargas de layout
Un +layout.js o +layout.server.js puede cargar datos compartidos por todas las páginas que dependen de él.
Acceder a los datos
La página recibe los datos combinados de todos los layouts antecesores y de la propia página.
export let data;
// data has both layout and page propertiesHeredar datos en los componentes
Use $page.data para acceder a los datos combinados desde cualquier lugar del árbol de layouts.
import { page } from "$app/stores";
<p>User: {$page.data.user?.name}</p>Autenticación en el nivel superior
Cargue el usuario actual en el layout raíz; todas las páginas pueden acceder a él mediante $page.data.
Evitar duplicaciones
Cargar los datos en el layout de nivel más alto que los necesite evita repetir las solicitudes en cada página.
Datos exclusivos del servidor
Para los datos confidenciales, cárguelos en +layout.server.js para que nunca lleguen al cliente, salvo que se rendericen.
Streaming
Las cargas de layout pueden transmitir Promises, igual que las cargas de página.
Resolución de conflictos
Los datos de la página sobrescriben los datos del layout cuando tienen la misma clave.
Herencia en TypeScript
Los tipos de datos de la página incluyen automáticamente los datos de los layouts antecesores mediante los tipos generados.
Invalidación
Use invalidate para volver a ejecutar cargas de layout específicas cuando lo necesite.
import { invalidate } from "$app/navigation";
invalidate("app:user");Jerarquía
Considere los layouts como una jerarquía de datos: la raíz para lo global, las secciones para lo específico de cada sección y las páginas para lo específico de cada página.
Comprobación rápida
¿Cómo se accede a los datos del layout desde una página?
Resumen
Las cargas de layout contribuyen a un objeto de datos combinado, disponible para los descendientes mediante la prop data y $page.data.
Preguntas frecuentes
¿La lección «Datos compartidos entre layouts» es gratis?
Sí — el texto completo de «Datos compartidos entre layouts» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Sveltejs Academy, actualiza a CoddyKit PRO. El curso de Sveltejs Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Datos compartidos entre layouts»?
Cargue datos en un layout padre y acceda a ellos en páginas y layouts hijo Practicas Sveltejs Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Sveltejs Academy?
No se requiere experiencia previa. Sveltejs Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Datos compartidos entre layouts»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Sveltejs Academy?
Sí. Cada lección de Sveltejs Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Grupos de layout con (group)
- Layouts a nivel de ruta
- Salir de un layout con +page@route
- Datos compartidos entre layouts