Svelte Stores Explained — Reactive State Management

In this tutorial, you will learn about Svelte Stores Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Svelte stores are reactive state containers that enable cross-component state sharing. The $ prefix auto-subscribes to stores, eliminating manual subscribe/unsubscribe calls.

What You'll Learn

• Writable stores for read/write state
• Readable stores for immutable data
• Derived stores from other stores
• Custom stores with custom methods
• $auto-subscription syntax

Why It Matters

Stores are Svelte's answer to shared state without a Virtual Dom. The $ prefix makes store access as simple as local variables while handling subscriptions automatically.

// stores/counter.js
import { writable, derived } from "svelte/store";

export const count = writable(0);
export const doubled = derived(count, ($count) => $count * 2);
export const user = writable({ name: "Alice", theme: "dark" });

<script>
  import { count, doubled, user } from "./stores/counter.js";

  function increment() { count.update(n => n + 1); }
  function reset() { count.set(0); }
</script>

<h1>Count: {$count}</h1>
<h2>Doubled: {$doubled}</h2>
<button on:click={increment}>+</button>
<button on:click={reset}>Reset</button>

<h3>User: {$user.name}</h3>
<h3>Theme: {$user.theme}</h3>

<!-- AnotherComponent.svelte -->
<script>
  import { count, user } from "./stores/counter.js";
</script>

<p>Count from another component: {$count}</p>
<p>User: {$user.name}</p>

Expected output: Both components share the same reactive state. Incrementing in one component updates the $count value in both.