Delade data mellan layouter
Läs in data i en överordnad layout och få åtkomst till den i underordnade sidor och layouter.
Delade data mellan layouter är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Laddning i layouter
En +layout.js eller +layout.server.js kan läsa in data som delas av alla sidor under den.
Åtkomst till data
Sidan tar emot data som slagits samman från alla överordnade layouter och från själva sidan.
export let data;
// data has both layout and page propertiesÄrvning i komponenter
Använd $page.data för att komma åt de sammanslagna dataobjekten var som helst i layoutträdet.
import { page } from "$app/stores";
<p>User: {$page.data.user?.name}</p>Autentisering på toppnivå
Läs in den aktuella användaren i root-layouten; varje sida kan komma åt användaren via $page.data.
Undvik duplicering
Genom att läsa in data i den högsta layout som behöver den undviker du upprepade hämtningar på varje sida.
Data endast på servern
För känsliga data läser du in dem i +layout.server.js så att de aldrig når klienten om de inte renderas.
Strömning
Layoutladdningar kan strömma Promises precis som sidladdningar.
Konfliktlösning
Sidans data skriver över layoutdata med samma nyckel.
TypeScript-ärvning
Sidans datatyper inkluderar automatiskt data från överordnade layouter via genererade typer.
Ogiltigförklaring
Använd invalidate för att köra om specifika layoutladdningar vid behov.
import { invalidate } from "$app/navigation";
invalidate("app:user");Hierarki
Se layouter som en datahierarki: root för globala data, sektioner för sektionsspecifika data och sidor för sidspecifika data.
Snabb kontroll
Hur kommer du åt layoutdata på en sida?
Sammanfattning
Layoutladdningar bidrar till ett sammanslaget dataobjekt som är tillgängligt för underordnade via data-propen och $page.data.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Delade data mellan layouter” gratis?
Ja – hela texten till ”Delade data mellan layouter” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Delade data mellan layouter”?
Läs in data i en överordnad layout och få åtkomst till den i underordnade sidor och layouter. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.
Hur lång tid tar lektionen ”Delade data mellan layouter”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Layoutgrupper med (group)
- Layouter på route-nivå
- Bryt dig ur en layout med +page@route
- Delade data mellan layouter