Tietojen palauttaminen ja $page.data-muuttujan käyttö
Palauttakaa tietoja load-funktiosta ja käyttäkää niitä sivukomponentissa data-propin kautta.
Tietojen palauttaminen ja $page.data-muuttujan käyttö on ilmainen Sveltejs Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Sveltejs Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
data-props
Sivu vastaanottaa erityisen data-propsin, joka täytetään load-funktion paluuarvosta.
<!-- +page.svelte -->
<script>
export let data;
</script>
<ul>{#each data.items as it}<li>{it.name}</li>{/each}</ul>Tyyppiturvallisuus
TypeScriptiä käytettäessä SvelteKit luo tyypit load-funktion ja datan välille automaattisesti.
<script lang="ts">
import type { PageData } from "./$types";
export let data: PageData;
</script>Useita ominaisuuksia
Palauttakaa useita avaimia ja käyttäkää kutakin data.key-arvon kautta.
Reaktiivisuus
data-props päivittyy reaktiivisesti navigoinnin yhteydessä. Sidonnat renderöidään uudelleen.
$page-store
Käyttäkää metatietoja kaikkialla $app/stores-moduulin $page-storen kautta.
import { page } from "$app/stores";
<p>Current path: {$page.url.pathname}</p>Layout-tietojen yhdistäminen
Layoutin ja sivun load-funktiot yhdistyvät yhdeksi data-olioksi, joka on käytettävissä kaikkialla sivupuussa.
Mukautetut propsit
Voitte välittää mitä tahansa sarjoitettavia arvoja: taulukoita, olioita, primitiivejä ja jopa promiseja suoratoistoa varten.
Vältä funktioita
Funktioita ei voi sarjoittaa; palauttakaa vain dataa, älkää toiminnallisuutta.
Oletusarvot
Jos load ei palauta mitään, data on {}.
Koostaminen storejen kanssa
Voitte täyttää storeja load-tiedoilla mount-vaiheessa, jolloin ne ovat käytettävissä maailmanlaajuisesti.
Sivun virheet
Jos load heittää virheen, lähin +error.svelte näytetään. dataa ei aseteta.
Pikatarkistus
Miten load-funktion paluuarvoa käytetään komponentissa?
Kertaus
Vastaanota lataustiedot data-propin kautta. Käytä $page-objektia URL-osoitetta, parametreja ja reittitietoja varten.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”Tietojen palauttaminen ja $page.data-muuttujan käyttö” ilmainen?
Kyllä – oppitunnin ”Tietojen palauttaminen ja $page.data-muuttujan käyttö” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Sveltejs Academy-kurssin, päivitä CoddyKit PROhon. Sveltejs Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tietojen palauttaminen ja $page.data-muuttujan käyttö”?
Palauttakaa tietoja load-funktiosta ja käyttäkää niitä sivukomponentissa data-propin kautta. Harjoittelet Sveltejs Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Sveltejs Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Sveltejs Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Tietojen palauttaminen ja $page.data-muuttujan käyttö”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Sveltejs Academy-oppitunnilla?
Kyllä. Jokainen Sveltejs Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- +page.js:n load-funktio
- Tietojen palauttaminen ja $page.data-muuttujan käyttö
- Virheenkäsittely load-funktiossa
- +page.server.js palvelimella suoritettavalle logiikalle