Dados compartilhados entre layouts
Carregue dados em um layout pai e acesse-os nas páginas e nos layouts filhos.
Dados compartilhados entre layouts é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 4 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Sveltejs Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Sveltejs Academy inclui 4 aulas no total.
Carregamentos do leiaute
Um +layout.js ou +layout.server.js pode carregar dados compartilhados por todas as páginas abaixo dele.
Acessando dados
A página recebe dados combinados de todos os leiautes ancestrais e da própria página.
export let data;
// data has both layout and page propertiesHerança nos componentes
Use $page.data para acessar os dados combinados em qualquer ponto da árvore de leiautes.
import { page } from "$app/stores";
<p>User: {$page.data.user?.name}</p>Autenticação no nível superior
Carregue o usuário atual no leiaute raiz; todas as páginas podem acessá-lo por meio de $page.data.
Evite duplicação
Carregar os dados no leiaute mais alto que precisa deles evita buscas repetidas em cada página.
Dados exclusivos do servidor
Para dados sensíveis, carregue-os em +layout.server.js para que nunca cheguem ao cliente, a menos que sejam renderizados.
Transmissão
Os carregamentos de leiaute podem transmitir promessas, assim como os carregamentos de página.
Resolução de conflitos
Os dados da página substituem os dados do leiaute quando possuem a mesma chave.
Herança do TypeScript
Os tipos de dados da página incluem automaticamente os dados dos leiautes ancestrais por meio dos tipos gerados.
Invalidação
Use invalidate para executar novamente carregamentos específicos do leiaute quando necessário.
import { invalidate } from "$app/navigation";
invalidate("app:user");Hierarquia
Trate os leiautes como uma hierarquia de dados: a raiz para dados globais, as seções para dados específicos da seção e as páginas para dados específicos da página.
Verificação rápida
Como acessar os dados do leiaute em uma página?
Recapitulação
Os carregamentos do leiaute contribuem para um objeto de dados combinado, disponível aos descendentes por meio da propriedade de dados e de $page.data.
Perguntas Frequentes
A aula “Dados compartilhados entre layouts” é grátis?
Sim — o texto completo de “Dados compartilhados entre layouts” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Sveltejs Academy, atualize para CoddyKit PRO. O curso de Sveltejs Academy inclui 4 aulas no total.
O que vou aprender em “Dados compartilhados entre layouts”?
Carregue dados em um layout pai e acesse-os nas páginas e nos layouts filhos. Você pratica Sveltejs Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Sveltejs Academy?
Nenhuma experiência prévia é necessária. Sveltejs Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 4 de 4.
Quanto tempo leva a aula “Dados compartilhados entre layouts”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Sveltejs Academy?
Sim. Cada aula de Sveltejs Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Grupos de layout com (group)
- Layouts no nível da rota
- Saindo de um layout com +page@route
- Dados compartilhados entre layouts