Bases de Svelte
Introduction
Liaisons
Classes et styles
Svelte avancé
Réutiliser du contenu
Mouvements
Liaisons avancées
Transitions avancées
API de contexte
Éléments spéciaux
<script module>
Next steps
Bases de SvelteKit
Introduction
Routing
Chargement de données
En-têtes et cookies
Modules partagés
Formulaires
$app/state
Erreurs et redirections
SvelteKit avancé
Options de page
Options de lien
Routing avancé
Chargement avancé
Variables d’environnement
Conclusion
Enfin, vous avez l’option nucléaire — invalidateAll(). Ceci va ré-exécuter de manière
indifférenciée toutes les fonctions load pour la page courante, indépendamment de ce sur quoi
elles dépendent.
Mettez à jour src/routes/[...timezone]/+page.svelte venant de l’exercice précédent :
src/routes/[...timezone]/+page
<script>
import { onMount } from 'svelte';
import { invalidateAll } from '$app/navigation';
let { data } = $props();
onMount(() => {
const interval = setInterval(() => {
invalidateAll();
}, 1000);
return () => {
clearInterval(interval);
};
});
</script><script lang="ts">
import { onMount } from 'svelte';
import { invalidateAll } from '$app/navigation';
let { data } = $props();
onMount(() => {
const interval = setInterval(() => {
invalidateAll();
}, 1000);
return () => {
clearInterval(interval);
};
});
</script>L’appel à depends dans le fichier src/routes/+layout.js n’est plus nécessaire :
src/routes/+layout
export async function load({ depends }) {
depends('data:now');
return {
now: Date.now()
};
}
invalidate(() => true)etinvalidateAllne sont pas équivalentes.invalidateAllré-exécute également les fonctionsloadn’ayant pas de dépendances d’url, ce queinvalidate(() => true)ne fait pas.
Modifier cette page sur Github
précédent suivant
1