Retornando dados e usando $page.data
Retorne dados de load e acesse-os no componente da página por meio da propriedade data.
Retornando dados e usando $page.data é uma aula grátis de Sveltejs Academy no CoddyKit. Esta é a aula 2 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.
A propriedade data
A página recebe uma propriedade especial data, preenchida pelo retorno da função de carregamento.
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>Segurança de tipos
Com TypeScript, o SvelteKit gera automaticamente os tipos de data a partir do carregamento.
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>Várias propriedades
Retorne várias chaves; acesse cada uma por meio de data.key.
Reatividade
A propriedade de dados é atualizada de forma reativa durante a navegação. As associações são renderizadas novamente.
Armazenamento $page
Acesse metadados em qualquer lugar por meio de $page, de $app/stores.
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>Mesclagem de dados dos layouts
O carregamento do layout e o carregamento da página são mesclados em um único objeto de dados, acessível em toda a árvore de páginas.
Propriedades personalizadas
Você pode passar quaisquer valores serializáveis: matrizes, objetos, valores primitivos e até Promises para transmissão gradual.
Evite funções
As funções não podem ser serializadas; retorne apenas dados, não comportamento.
Valores padrão
Se o carregamento não retornar nada, os dados serão {}.
Composição com armazenamentos
Você pode preencher armazenamentos com dados do carregamento durante a montagem para obter acesso global.
Erros da página
Se o carregamento lançar uma exceção, o +error.svelte mais próximo será exibido. Os dados não serão definidos.
Verificação rápida
Como acessar o retorno de load em um componente?
Recapitulação
Receba os dados de carregamento por meio da propriedade data. Use $page para obter a URL, os parâmetros e as informações da rota.
Perguntas Frequentes
A aula “Retornando dados e usando $page.data” é grátis?
Sim — o texto completo de “Retornando dados e usando $page.data” é 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 “Retornando dados e usando $page.data”?
Retorne dados de load e acesse-os no componente da página por meio da propriedade data. 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 2 de 4.
Quanto tempo leva a aula “Retornando dados e usando $page.data”?
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
- Função load de +page.js
- Retornando dados e usando $page.data
- Tratamento de erros em load
- +page.server.js para lógica exclusiva do servidor