SvelteKitReference

$app/state

SvelteKit rend disponibles trois objets d’état en lecture seule via le module $app/state, — page, navigating et updated.

Ce module a été ajouté avec la version 2.12. Si vous utilisez une version plus ancienne de SvelteKit, utilisez plutôt $app/stores.

import { const navigating: Navigation | {
    from: null;
    to: null;
    type: null;
    willUnload: null;
    delta: null;
    complete: null;
}A read-only object representing an in-progress navigation, with from, to, type and (if type === 'popstate') delta properties.
Values are null when no navigation is occurring, or during server rendering.
navigating, const page: Page<Record<string, string>, string | null>A read-only reactive object with information about the current page, serving several use cases:

retrieving the combined data of all pages/layouts anywhere in your component tree (also see loading data)
retrieving the current value of the form prop anywhere in your component tree (also see form actions)
retrieving the page state that was set through goto, pushState or replaceState (also see goto and shallow routing)
retrieving metadata such as the URL you’re on, the current route and its parameters, and whether or not there was an error

&#x3C;! file: +layout.svelte >
&#x3C;script>
	import { page } from '$app/state';
&#x3C;/script>

&#x3C;p>Currently at {page.url.pathname}&#x3C;/p>

{#if page.error}
	&#x3C;span class="red">Problem detected&#x3C;/span>
{:else}
	&#x3C;span class="small">All systems operational&#x3C;/span>
{/if}
Changes to page are available exclusively with runes. (The legacy reactivity syntax will not reflect any changes)
&#x3C;! file: +page.svelte >
&#x3C;script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // This will correctly update id for usage on this page
	$: badId = page.params.id; // Do not use; will never update after initial load
&#x3C;/script>
On the server, values can only be read during rendering (in other words not in e.g. load functions). In the browser, the values can be read at any time.
page, const updated: {
    readonly current: boolean;
    check(): Promise<boolean>;
}A read-only reactive value that’s initially false. If version.pollInterval is a non-zero value, SvelteKit will poll for new versions of the app and update current to true when it detects one. updated.check() will force an immediate check, regardless of polling.
updated } from '$app/state';

navigating

Un objet en lecture seule représentant une navigation en cours, avec des propriétés from, to, type et (si type === 'popstate') delta. Les valeurs de ces propriétés sont null lorsqu’aucune navigation n’est en cours, ou lors du rendu côté serveur.

const navigating:
	| import('@sveltejs/kit').Navigation
	| {
			from: null;
			to: null;
			type: null;
			willUnload: null;
			delta: null;
			complete: null;
	  };

page

Un objet réactif en lecture seule avec des informations concernant la page courante, servant plusieurs cas d’usage :

récupérer les data combinées de toutes les pages/layouts de votre arbre de composants (voir également la section charger des données)
récupérer la valeur courant de la propriété form n’importe où dans votre arbre de composant (voir également la section actions de formulaire)
récupérer l’état de la page défini via goto, pushState ou replaceState (voir également les sections goto, et shallow routing)
récupérer les métadonnées comme l’URL courante, la route courante et ses paramètres, et si oui ou non une erreur s’est produite

+layout

<script>
	import { page } from '$app/state';
</script>

<p>Actuellement sur la page {page.url.pathname}</p>

{#if page.error}
	<span class="red">Problème détecté</span>
{:else}
	<span class="small">Tous les systèmes sont opérationnels</span>
{/if}

<script lang="ts">
	import { page } from '$app/state';
</script>

<p>Actuellement sur la page {page.url.pathname}</p>

{#if page.error}
	<span class="red">Problème détecté</span>
{:else}
	<span class="small">Tous les systèmes sont opérationnels</span>
{/if}

Les changements sur l’objet page sont uniquement accessibles avec les runes. (La syntaxe ancienne de réactivité ne va refléter aucun changement)

+page

<script>
	import { page } from '$app/state';
	const id = $derived(page.params.id); // Ceci va correctement fourni l'id à jour sur cette page
	$: badId = page.params.id; // Ne pas utiliser ; ne va jamais être mis à jour après le chargement initial
</script>

<script lang="ts">
	import { page } from '$app/state';
	const id = $derived(page.params.id); // Ceci va correctement fourni l'id à jour sur cette page
	$: badId = page.params.id; // Ne pas utiliser ; ne va jamais être mis à jour après le chargement initial
</script>

Sur le serveur, les valeurs peuvent uniquement être lues lors du rendu (autrement dit, pas dans les fonctions load, par exemple). Dans le navigateur, les valeurs peuvent être lues à n’importe quel moment.

const page: import('@sveltejs/kit').Page;

updated

Une valeur réactive en lecture seule qui vaut initialement false. Si version.pollInterval est une valeur différente de zéro, SvelteKit va régulièrement vérifier (en faisant du polling) s’il existe de nouvelles versions de l’application et mettre à jour current à true lors qu’une nouvelle version existe. updated.check() permet de forcer une vérification immédiate, indépendamment du polling.

const updated: {
	get current(): boolean;
	check(): Promise<boolean>;
};

Modifier cette page sur Github llms.txt

précédent suivant

$app/server $app/stores