← Tous les chapitresChapitre 9 · ~30 min

State management

Partager l’état entre composants avec les runes et svelte/store.

En Svelte 5, la façon idiomatique de partager un état est un module .svelte.ts qui exporte des runes. Tous les composants qui l’importent lisent la même instance.

  • Un fichier .svelte.ts est compilé comme du code réactif, même hors d’un composant.
  • Une variable $state est un « singleton » partagé entre tous les importeurs.
  • On expose des fonctions de lecture/écriture pour garder un contrôle clair.
src/lib/panier.svelte.tssvelte
let lignes = $state<string[]>([])

export function ajouter(id: string) {
  lignes.push(id)
}

export function vider() {
  lignes = []
}

export function getLignes() {
  return lignes
}