Svelte et Sveltekit: L'utilisation des stores

Par wgharbi, 15 mars, 2025

Dans cet article, nous allons explorer une nouvelle fonctionnalité : la gestion réactive des états avec les stores dans Svelte et SvelteKit. Cette approche simplifie la gestion de l'état global de l’application.

Qu’est-ce qu’un store dans Svelte ?

Un store Svelte est un objet qui contient des données observables pouvant être partagées à travers plusieurs composants. L’intérêt des stores est qu’ils permettent une mise à jour réactive facile, synchronisée et immédiate de l’interface utilisateur.

Svelte propose trois types de stores par défaut :

Writable : permet une lecture et une écriture réactive.
Readable : lecture seule avec une initialisation.
Derived : basé sur un ou plusieurs autres stores.

Implémentation d’un store avec SvelteKit

Voici comment créer un store réactif global simple pour gérer une liste d’articles dans une application SvelteKit :

`src/lib/stores/articles.js`

import { writable } from 'svelte/store';

export const articlesStore = writable([
  { slug: 'article-1', titre: 'Premier Article', contenu: 'Contenu du premier article.' },
  { slug: 'article-2', titre: 'Deuxième Article', contenu: 'Contenu du deuxième article...' }
]);

Ce store est accessible depuis n’importe quelle page ou composant.

Utilisation du store dans une page

<script>
  import { articles } from '../stores/articles.js';
</script>

<h1>Mes articles</h1>
<ul>
  {#each $articles as article}
    <li>
      <a href={`/blog/${article.slug}`}>{article.titre}</a>
    </li>
  {/each}
</ul>

Ici, SvelteKit gère automatiquement la réactivité : toute modification du store se répercute immédiatement sur les pages concernées.

Ajouter dynamiquement des articles dans un store

Voici comment modifier dynamiquement la liste en ajoutant un formulaire :

<script>
  import { articles } from '../stores/articles.js';
  let titre = '';
  let contenu = '';

  const ajouterArticle = () => {
    articles.update(liste => [
      ...liste,
      { slug: titre.toLowerCase().replace(/\s/g, '-'), titre, contenu: 'Nouveau contenu ajouté dynamiquement' }
    ]);
    titre = '';
  };
</script>

<form on:submit|preventDefault={() => articles.update(a => [...a, {titre, slug: titre.toLowerCase().replace(/ /g, '-'), contenu: 'Nouveau contenu...'}])}>
  <input type="text" bind:value={titre} placeholder="Titre de l'article">
  <button type="submit">Ajouter un article</button>
</form>

L’utilisateur peut ainsi ajouter facilement des articles, qui apparaissent immédiatement dans la liste grâce à la réactivité du store.

Explications détaillées du code

Création du store : Un store Svelte s'initialise par la fonction writable() du module svelte/store.
Mise à jour du store : la méthode .update() permet de modifier le store en conservant l’état précédent, tandis que .set() remplace complètement son contenu.

Conclusion personnelle

L’intégration de stores dans SvelteKit améliore nettement la lisibilité et la réactivité de l’application. C’est particulièrement utile pour des applications interactives, où la gestion de l’état peut rapidement devenir complexe.