Setting Up State Management (Svelte Store) for Svelte Application
Svelte stores are the simplest state management: reactive variables that trigger updates automatically. No boilerplate, no context, just subscriptions.
Perfect for small to medium Svelte applications.
What's Involved
Creating writable stores, derived stores, custom stores, integrating with Svelte components.
Writable Stores
import { writable, derived, readable } from 'svelte/store'
export const count = writable(0)
export const doubled = derived(count, c => c * 2)
export const cartItems = writable<CartItem[]>([])
export const cartTotal = derived(cartItems, items =>
items.reduce((sum, i) => sum + i.price * i.qty, 0)
)
Usage in components:
<script>
import { count, doubled, cartItems, cartTotal } from './stores.ts'
</script>
<button on:click={() => count.update(n => n + 1)}>
Count: {$count} (doubled: {$doubled})
</button>
<div>Items: {$cartItems.length}, Total: ${$cartTotal}</div>
Custom Stores
function createCart() {
const { subscribe, set, update } = writable<CartItem[]>([])
return {
subscribe,
addItem: (item: CartItem) => update(items => [...items, item]),
removeItem: (id: string) => update(items => items.filter(i => i.id !== id)),
clear: () => set([]),
}
}
export const cart = createCart()
Timeline
Basic store setup — 30 minutes. Multiple derived stores — 1 hour. Complex custom stores — 2–3 hours.