Mimir's Well - Stores

Welcome to Mimir's Well! Odin sacrificed his eye for the chance to drink from this well of wisdom. Stores in Svelte are just like that source - shared wisdom accessible to all components.

What are Stores?

Stores are reactive data containers, available globally:

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

// Writable - can read and write
export const gold = writable(0);

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

// Derived - computed from other stores
export const doubleGold = derived(gold, $gold => $gold * 2);

Stores work in Svelte 5 just as before, and you will find them in many libraries. For shared state in new code, Svelte 5 also recommends runes in .svelte.js files - you will compare both approaches in lesson 8_4.

Writable Store

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

  // Subscription with $
  // $gold automatically subscribes and unsubscribes
</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>

Writable methods

import { writable } from 'svelte/store';

const count = writable(0);

// Get current value (one-time)
import { get } from 'svelte/store';
console.log(get(count)); // 0

// Set value
count.set(10);

// Update based on previous value
count.update(n => n + 1);

// Subscribe to changes
const unsubscribe = count.subscribe(value => {
  console.log('New value:', value);
});

// Unsubscribe
unsubscribe();

Mimir's Well shares wisdom - Stores share data!

<script>
  // Well of Mimir - Wisdom shared between components
  // 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>Well of Mimir - Stores</h1>
  <p class="subtitle">Shared state between components</p>

  <section>
    <h2>writable store</h2>
    <p>Value in 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>