Le Puits de Mimir - Stores

Bienvenue au Puits de Mimir ! Odin a sacrifié son œil pour avoir la chance de boire à cette source de sagesse. Les Stores dans Svelte sont comme cette source - une sagesse partagée accessible à tous les composants.

Que sont les Stores ?

Les Stores sont des conteneurs de données réactifs, disponibles globalement :

// stores.js
import { writable, readable, derived } from 'svelte/store';

// Writable - peut lire et écrire
export const gold = writable(0);

// Readable - lecture seule
export const time = readable(new Date(), set => {
  const interval = setInterval(() => set(new Date()), 1000);
  return () => clearInterval(interval);
});

// Derived - calculé à partir d'autres stores
export const doubleGold = derived(gold, $gold => $gold * 2);

Les stores fonctionnent en Svelte 5 comme avant, et tu les trouveras dans de nombreuses bibliothèques. Pour l'état partagé dans le nouveau code, Svelte 5 recommande aussi les runes dans les fichiers .svelte.js : tu compareras les deux approches dans la leçon 8_4.

Writable Store

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

  // Abonnement avec $
  // $gold s'abonne et se désabonne automatiquement
</script>

<p>Gold: {$gold}</p>
<button onclick={() => $gold += 10}>+10 gold</button>
<button onclick={() => gold.set(0)}>Reset</button>
<button onclick={() => gold.update(n => n * 2)}>x2</button>

Méthodes de Writable

import { writable } from 'svelte/store';

const count = writable(0);

// Récupérer la valeur actuelle (une fois)
import { get } from 'svelte/store';
console.log(get(count)); // 0

// Définir la valeur
count.set(10);

// Mettre à jour en fonction de la valeur précédente
count.update(n => n + 1);

// S'abonner aux changements
const unsubscribe = count.subscribe(value => {
  console.log('New value:', value);
});

// Se désabonner
unsubscribe();

Le Puits de Mimir partage la sagesse - les Stores partagent les données !

<script>
  // Puits de Mimir - Sagesse partagée entre les composants
  // writable, readable, derived stores
  import { count, doubled, reset } from './stores.js';
  import Counter from './Counter.svelte';
  import Display from './Display.svelte';
</script>

<main class="mimir">
  <h1>Puits de Mimir - Stores</h1>
  <p class="subtitle">État partagé entre les composants</p>

  <section>
    <h2>writable store</h2>
    <p>Valeur dans App : <strong>{$count}</strong></p>
    <p>derived (doubled) : <strong>{$doubled}</strong></p>
    <button onclick={reset}>Réinitialiser</button>
  </section>

  <div class="components">
    <Counter />
    <Display />
  </div>
</main>

<style>
  .mimir {
    font-family: 'Georgia', serif;
    max-width: 600px;
    margin: 0 auto;
    padding: 2rem;
    background: linear-gradient(135deg, #0a1628 0%, #1a2d4e 100%);
    color: #b8d4f7;
    min-height: 100vh;
  }

  h1 {
    color: #4a90d9;
    text-align: center;
  }

  .subtitle {
    text-align: center;
    color: #6a8ab9;
  }

  section {
    background: rgba(74, 144, 217, 0.1);
    border: 1px solid #4a90d9;
    border-radius: 8px;
    padding: 1rem;
    margin: 1rem 0;
  }

  h2 {
    color: #4a90d9;
    font-size: 1rem;
    margin-top: 0;
  }

  strong {
    color: #7cb3f0;
    font-size: 1.25rem;
  }

  button {
    padding: 0.5rem 1rem;
    background: #1e3a5f;
    color: #b8d4f7;
    border: 1px solid #4a90d9;
    border-radius: 4px;
    cursor: pointer;
  }

  .components {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
</style>