Stores & Component Events — Svelte & SvelteKit | Sabaoon Academy

When state needs to be shared across multiple components — not just between parent and child — Svelte provides stores: reactive containers that any component can subscribe to.

Writable Stores

// src/lib/stores.js
import { writable } from 'svelte/store';

export const count   = writable(0);
export const theme   = writable('light');
export const cart    = writable([]);

Subscribe in a component with the $ auto-subscription prefix:

<script>
  import { count } from '$lib/stores';
</script>

<!-- $count auto-subscribes and unsubscribes -->
<p>Count: {$count}</p>
<button on:click={()=> count.update(n=> n + 1)}>+</button>
<button on:click={()=> count.set(0)}>Reset</button>

The $store syntax is Svelte compiler sugar — it calls store.subscribe() on mount and unsubscribe() on destroy automatically.

Derived Stores

Compute values from other stores:

import { derived } from 'svelte/store';
import { cart } from './stores';

export const cartTotal = derived(
  cart,
  $cart => $cart.reduce((sum, item) => sum + item.price * item.qty, 0)
);

export const cartCount = derived(
  cart,
  $cart => $cart.reduce((sum, item) => sum + item.qty, 0)
);

<p>Total: £{$cartTotal.toFixed(2)}</p>
<p>Items: {$cartCount}</p>

derived re-runs whenever cart changes.

Readable Stores

For values that update on their own (timers, sensor data):

import { readable } from 'svelte/store';

export const time = readable(new Date(), function start(set) {
  const interval = setInterval(() => set(new Date()), 1000);
  return function stop() { clearInterval(interval); };
});

The second argument is a start function that runs when the first subscriber joins. It returns a stop function called when the last subscriber leaves.

Component Events

Child-to-parent communication uses createEventDispatcher:

<!-- TodoItem.svelte -->
<script>
  import { createEventDispatcher } from 'svelte';
  export let todo;

  const dispatch = createEventDispatcher();
</script>

<li>
  <span>{todo.text}</span>
  <button on:click={()=> dispatch('delete', todo.id)}>✕</button>
  <button on:click={()=> dispatch('toggle', todo.id)}>✓</button>
</li>

Parent listens with on:eventName:

<!-- TodoList.svelte -->
<script>
  import TodoItem from './TodoItem.svelte';
  let todos = [{ id: 1, text: 'Learn Svelte', done: false }];

  function deleteTodo(e)  { todos = todos.filter(t => t.id !== e.detail) }
  function toggleTodo(e)  { todos = todos.map(t => t.id === e.detail ? {...t, done: !t.done} : t) }
</script>

{#each todos as todo}
  <TodoItem {todo} on:delete={deleteTodo} on:toggle={toggleTodo} />
{/each}

Store-Driven Todo List

Ctrl+Enter

HTML

CSS

* { box-sizing: border-box; }
body { font-family: sans-serif; padding: 1.25rem; background: #fafafa; }
h2 { font-size: 1rem; margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }

.badge {
background: #ff3e00; color: white;
font-size: 0.7rem; padding: 0.1rem 0.4rem;
font-weight: bold; min-width: 1.2rem; text-align: center;
}

#addForm { display: flex; gap: 0.4rem; margin-bottom: 0.875rem; }
input { flex: 1; padding: 0.4rem 0.5rem; border: 1px solid #d1d5db; font-size: 0.875rem; }
button { padding: 0.4rem 0.75rem; background: #ff3e00; color: white; border: none; cursor: pointer; font-size: 0.875rem; }

.list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }

.item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.625rem; background: white; border: 1px solid #e5e7eb; }
.item.done span { text-decoration: line-through; color: #9ca3af; }
.item span { flex: 1; font-size: 0.875rem; cursor: pointer; }
.del { background: none; border: none; color: #dc2626; cursor: pointer; font-size: 1rem; padding: 0; }

.empty { color: #9ca3af; font-size: 0.8rem; display: none; }

// Simulating Svelte's writable store
var todos = [];
var nextId = 1;

function render() {
var list  = document.getElementById('list');
var empty = document.getElementById('empty');
var badge = document.getElementById('badge');
var remaining = todos.filter(function(t) { return !t.done; }).length;

badge.textContent = remaining;
list.innerHTML = '';
empty.style.display = todos.length ? 'none' : 'block';

todos.forEach(function(todo) {
  var li = document.createElement('li');
  li.className = 'item' + (todo.done ? ' done' : '');
  li.innerHTML =
    '<span title="Click to toggle">' + todo.text + '</span>' +
    '<button class="del" data-id="' + todo.id + '">✕</button>';

li.querySelector('span').onclick = function() {
    todo.done = !todo.done;
    render();
    console.log('store.update: toggle', todo.id);
  };
  list.appendChild(li);
});

// Event delegation for delete (like on:delete dispatcher)
list.querySelectorAll('.del').forEach(function(btn) {
  btn.onclick = function() {
    todos = todos.filter(function(t) { return t.id !== parseInt(this.dataset.id); }.bind(this));
    render();
    console.log('store.update: delete', this.dataset.id);
  };
});
}

document.getElementById('addForm').addEventListener('submit', function(e) {
e.preventDefault();
var text = document.getElementById('input').value.trim();
if (!text) return;
todos.push({ id: nextId++, text: text, done: false });
document.getElementById('input').value = '';
render();
console.log('store.update: add "' + text + '"');
});

render();

Preview

Binding to Store Values

You can two-way bind directly to a store:

<script>
  import { theme } from '$lib/stores';
</script>

<select bind:value={$theme}>
  <option value="light">Light</option>
  <option value="dark">Dark</option>
</select>

<p>Current theme: {$theme}</p>

Assigning $theme = 'dark' calls theme.set('dark') under the hood.