Studnia Mimir - Stores

Witaj przy Studni Mimir! Odin oddał oko za możliwość picia z tej studni mądrości. Stores w Svelte to właśnie takie źródło - wspólna mądrość dostępna dla wszystkich komponentów.

Czym są Stores?

Stores to reaktywne kontenery na dane, dostępne globalnie:

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

// Writable - można czytać i pisać
export const gold = writable(0);

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

// Derived - obliczony z innych stores
export const doubleGold = derived(gold, $gold => $gold * 2);

Stores działają w Svelte 5 tak jak wcześniej i znajdziesz je w wielu bibliotekach. Do stanu współdzielonego w nowym kodzie Svelte 5 poleca też runy w plikach .svelte.js - porównasz oba sposoby w lekcji 8_4.

Writable Store

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

  // Subskrypcja z $
  // $gold automatycznie subskrybuje i odsubskrybuje
</script>

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

Metody writable

import { writable } from 'svelte/store';

const count = writable(0);

// Pobierz aktualną wartość (jednorazowo)
import { get } from 'svelte/store';
console.log(get(count)); // 0

// Ustaw wartość
count.set(10);

// Aktualizuj na podstawie poprzedniej
count.update(n => n + 1);

// Subskrybuj zmiany
const unsubscribe = count.subscribe(value => {
  console.log('Nowa wartość:', value);
});

// Odsubskrybuj
unsubscribe();

Studnia Mimir dzieli mądrość - Stores dzielą dane!

<script>
  // Studnia Mimir - Mądrość współdzielona między komponentami
  // 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>Studnia Mimir - Stores</h1>
  <p class="subtitle">Współdzielony stan między komponentami</p>

  <section>
    <h2>writable store</h2>
    <p>Wartość w App: <strong>{$count}</strong></p>
    <p>derived (doubled): <strong>{$doubled}</strong></p>
    <button onclick={reset}>Reset</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>