Czym różni się readable od writable store?

readable może być tylko odczytywany, nie można go modyfikować z zewnątrz

readable przechowuje tylko stringi

Kurs Svelte i SvelteKit · Moduł 8: Stores

Readable i Derived Stores

2 min czytania · Zaktualizowano 13 sierpnia 2026

Udostępnij

W tej lekcji3

Readable Store

Store tylko do odczytu - ustawiany zewnętrznie:

import { readable } from 'svelte/store';

// Aktualny czas
export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  // Cleanup - gdy ostatni subskrybent odejdzie
  return function stop() {
    clearInterval(interval);
  };
});

// Pozycja myszy
export const mousePosition = readable({ x: 0, y: 0 }, set => {
  function handler(e) {
    set({ x: e.clientX, y: e.clientY });
  }

  window.addEventListener('mousemove', handler);

  return () => {
    window.removeEventListener('mousemove', handler);
  };
});

Derived Store

Obliczony z innych stores:

import { writable, derived } from 'svelte/store';

export const warriors = writable([
  { name: 'Ragnar', strength: 95 },
  { name: 'Bjorn', strength: 88 }
]);

// Pojedyncza zależność
export const totalStrength = derived(
  warriors,
  $warriors => $warriors.reduce((sum, w) => sum + w.strength, 0)
);

// Wiele zależności
export const gold = writable(100);
export const items = writable(5);

export const canBuy = derived(
  [gold, items],
  ([$gold, $items]) => $gold >= 50 && $items < 10
);

Async Derived

export const asyncData = derived(
  userId,
  ($userId, set) => {
    set(null); // Loading state

    fetch(`/api/user/${$userId}`)
      .then(r => r.json())
      .then(data => set(data));

    // Opcjonalny cleanup
    return () => {};
  },
  null // Wartość początkowa
);

Kod do tej lekcji: App.svelte

<script>
  // readable store - tylko do odczytu
  import { time, elapsed } from './stores.js';
</script>

<main class="time-demo">
  <h1>⏰ readable store</h1>
  <p class="subtitle">Store tylko do odczytu</p>

  <section>
    <h2>Aktualny czas</h2>
    <div class="clock">{$time.toLocaleTimeString()}</div>
  </section>

  <section>
    <h2>Czas od załadowania</h2>
    <div class="elapsed">{$elapsed}s</div>
  </section>

  <section class="code">
    <h2>Jak to działa?</h2>
    <pre>
import {"{"} readable {"}"} from 'svelte/store';

export const time = readable(new Date(), set => {"{"}
  const interval = setInterval(() => {"{"}
    set(new Date());
  {"}"}, 1000);

  // Cleanup
  return () => clearInterval(interval);
{"}"});
    </pre>
  </section>
</main>

<style>
  .time-demo {
    font-family: 'Georgia', serif;
    max-width: 500px;
    margin: 0 auto;
    padding: 2rem;
    background: #0a1628;
    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;
  }

  .clock {
    font-size: 3rem;
    font-family: monospace;
    text-align: center;
    color: #7cb3f0;
  }

  .elapsed {
    font-size: 2rem;
    font-family: monospace;
    text-align: center;
    color: #90ee90;
  }

  .code pre {
    background: rgba(0,0,0,0.5);
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.85rem;
    overflow-x: auto;
  }
</style>

Hasła z dokumentacji w tej lekcji

Widzisz błąd w tej lekcji?

Sprawdź się

Odpowiedz na pytania z tej lekcji. Wybierz odpowiedź, a od razu zobaczysz, czy jest poprawna.

1. Czym różni się readable od writable store?