Sveltejs Academy · leksjon

Delte data på tvers av layouts

Last inn data i en overordnet layout, og få tilgang til dem i underordnede sider og layouts.

Leksjon 4 av 413 trinn

Delte data på tvers av layouts er en gratis leksjon i Sveltejs Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Sveltejs Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.

Lasting av layoutdata

En +layout.js eller +layout.server.js kan laste inn data som deles av alle sider under den.

Tilgang til data

Siden mottar data som er slått sammen fra alle overordnede layouter og selve siden.

export let data;
// data has both layout and page properties

Arving i komponenter

Bruk $page.data for å få tilgang til de sammenslåtte dataene hvor som helst i layouttreet.

import { page } from "$app/stores";
<p>User: {$page.data.user?.name}</p>

Autentisering på toppnivå

Last inn den gjeldende brukeren i root-layouten. Alle sider kan få tilgang til brukeren via $page.data.

Unngå duplisering

Ved å laste inn data i den høyeste layouten som trenger dem, unngås gjentatte forespørsler på hver side.

Kun serverdata

For sensitive data bør de lastes inn i +layout.server.js, slik at de aldri når klienten med mindre de gjengis.

Strømming

Layout-lasting kan strømme Promises, akkurat som sidelasting.

Konfliktløsning

Data fra siden overstyrer layoutdata med samme nøkkel.

TypeScript-arv

Datatypene for siden inkluderer automatisk data fra overordnede layouter via genererte typer.

Invalidering

Bruk invalidate for å kjøre bestemte layout-lastingfunksjoner på nytt ved behov.

import { invalidate } from "$app/navigation";
invalidate("app:user");

Hierarki

Betrakt layouter som et datahierarki: root for globale data, seksjoner for seksjonsspesifikke data og sider for sidespesifikke data.

Kunnskapssjekk

Hvordan får man tilgang til layoutdata på en side?

Besvar den i den interaktive leksjonen

Oppsummering

Layout-lasting bidrar til et sammenslått dataobjekt som er tilgjengelig for underordnede elementer via data-propen og $page.data.

Gratis å komme i gang

Lær deg HTML med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 41
Leksjoner: 163

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Delte data på tvers av layouts» gratis?

Ja – hele teksten i «Delte data på tvers av layouts» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Sveltejs Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Sveltejs Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Delte data på tvers av layouts»?

Last inn data i en overordnet layout, og få tilgang til dem i underordnede sider og layouts. Du øver på Sveltejs Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Sveltejs Academy?

Ingen tidligere erfaring er nødvendig. Sveltejs Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Delte data på tvers av layouts»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Sveltejs Academy-leksjonen?

Ja. Alle Sveltejs Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Sveltejs Academy