1. 为什么需要Svelte stores？
在Svelte应用中，当我们需要在多个组件之间共享状态时，简单的props传递会变得繁琐且难以维护。想象一下你正在开发一个电商网站，购物车数据需要在导航栏、商品列表页和结算页面之间同步。如果仅靠组件层级传递props，代码很快就会变成"props钻探"的噩梦。
Svelte stores的诞生正是为了解决这类状态共享问题。它本质上是一个可观察对象（observable），允许订阅其值的变化。与React的Context或Redux相比，Svelte stores的API更加简洁，且与Svelte的响应式系统深度集成。
提示：Svelte stores特别适合管理那些需要跨组件访问、但又不属于任何单一组件所有的状态，比如用户认证信息、主题偏好或全局配置。
2. Svelte stores的三种类型解析
2.1 Writable stores - 可写存储
这是最基础也是最常用的store类型。通过writable()函数创建，允许外部代码通过set和update方法修改其值：
import { writable } from 'svelte/store'; // 创建 const cart = writable([]); // 设置新值 cart.set([{id: 1, name: 'Svelte Handbook'}]); // 基于当前值更新 cart.update(items => [...items, {id: 2, name: 'Advanced Svelte'}]);在组件中使用时，只需在store名前加$前缀即可自动订阅：
<script> import { cart } from './stores.js'; </script> <ul> {#each $cart as item} <li>{item.name}</li> {/each} </ul>2.2 Readable stores - 只读存储
当我们需要一个不能被外部直接修改的状态时使用。创建时需要提供初始值和一个start函数：
import { readable } from 'svelte/store'; const time = readable(new Date(), set => { const interval = setInterval(() => { set(new Date()); }, 1000); return () => clearInterval(interval); });这个例子创建了一个自动更新的时钟。start函数会在第一个订阅者出现时执行，返回的清理函数会在最后一个订阅者取消订阅时调用。
2.3 Derived stores - 派生存储
基于一个或多个现有store计算得出新值。当依赖的store变化时，派生store会自动更新：
import { derived } from 'svelte/store'; const totalItems = derived( cart, $cart => $cart.reduce((sum, item) => sum + item.quantity, 0) );派生store特别适合处理需要组合或转换的场景，比如从原始数据中过滤、排序或聚合。
3. Store的进阶使用模式
3.1 自定义store实现
通过返回一个包含自定义方法的对象，我们可以扩展store的功能：
function createCart() { const { subscribe, set, update } = writable([]); return { subscribe, add: item => update(items => [...items, item]), remove: id => update(items => items.filter(i => i.id !== id)), clear: () => set([]) }; } export const cart = createCart();这样使用时更加语义化：
cart.add({id: 3, name: 'Svelte in Action'}); cart.remove(2);3.2 与本地存储集成
将store与localStorage或sessionStorage结合，可以实现状态的持久化：
function persistentStore(key, initialValue) { const stored = localStorage.getItem(key); const store = writable(stored ? JSON.parse(stored) : initialValue); store.subscribe(value => { localStorage.setItem(key, JSON.stringify(value)); }); return store; }3.3 处理异步数据
store非常适合管理异步操作的状态：
function fetchUser(id) { const { subscribe, set } = writable({ loading: true }); async function load() { try { const response = await fetch(`/api/users/${id}`); set({ loading: false, data: await response.json() }); } catch (error) { set({ loading: false, error }); } } load(); return { subscribe }; }4. 性能优化与常见陷阱
4.1 避免不必要的订阅
每次在模板中使用$store都会创建一个订阅。如果在一个组件内多次使用同一个store，最好先将其赋值给一个局部变量：
<!-- 不推荐 --> <h1>{$user.name}</h1> <p>{$user.bio}</p> <!-- 推荐 --> <script> let user = $user; </script> <h1>{user.name}</h1> <p>{user.bio}</p>4.2 合理使用派生store
派生store会在每次依赖项变化时重新计算。对于计算量大的操作，考虑添加防抖或缓存：
const searchResults = derived( [query, filters], ([$query, $filters], set) => { const timer = setTimeout(async () => { const results = await search($query, $filters); set(results); }, 300); return () => clearTimeout(timer); }, [] );4.3 内存泄漏预防
对于手动创建的订阅，记得在组件销毁时取消：
<script> import { onDestroy } from 'svelte'; import { user } from './stores'; let userName; const unsubscribe = user.subscribe(u => { userName = u.name; }); onDestroy(unsubscribe); </script>5. 与Svelte其他特性的配合
5.1 与context API结合
对于需要在组件树深层传递的store，可以结合context API使用：
// Parent.svelte import { setContext } from 'svelte'; setContext('user', userStore); // Child.svelte import { getContext } from 'svelte'; const user = getContext('user');5.2 在SvelteKit中的应用
在SvelteKit中，我们可以在+page.svelte中通过load函数初始化store：
// +page.js export function load({ data }) { return { user: writable(data.user) }; } // +page.svelte export let data; $: user.set(data.user);5.3 与动画和过渡配合
store的值变化可以触发Svelte的动画系统：
<script> import { fly } from 'svelte/transition'; import { notifications } from './stores'; </script> {#each $notifications as notification (notification.id)} <div transition:fly={{ y: -20 }}> {notification.message} </div> {/each}6. 测试策略与调试技巧
6.1 单元测试store
使用Svelte的测试工具可以方便地测试store行为：
import { test } from 'vitest'; import { get } from 'svelte/store'; import { cart } from './cart'; test('add item to cart', () => { cart.add({id: 1, name: 'Test'}); expect(get(cart)).toEqual([{id: 1, name: 'Test'}]); });6.2 调试订阅行为
可以通过手动订阅来观察store的变化：
const unsubscribe = store.subscribe(value => { console.log('Store updated:', value); }); // 记得在适当的时候调用unsubscribe()6.3 使用Redux DevTools
通过自定义store实现，可以集成Redux DevTools进行状态调试：
function createStoreWithDevTools(name, initialState) { const devTools = window.__REDUX_DEVTOOLS_EXTENSION__?.connect({ name }); devTools?.init(initialState); const { subscribe, set, update } = writable(initialState); return { subscribe, set(value) { devTools?.send('set', value); set(value); }, update(fn) { update(prev => { const newValue = fn(prev); devTools?.send('update', newValue); return newValue; }); } }; }7. 与其他状态管理方案的对比
7.1 与React Context比较
相比React的Context API，Svelte stores：
- 不需要Provider包裹组件树
- 自动处理依赖追踪
- 更新更加高效
- 语法更加简洁
7.2 与Redux比较
Redux的优势在于：
- 时间旅行调试
- 中间件生态系统
- 严格的单向数据流
但对于大多数Svelte应用来说，stores已经足够强大且更符合Svelte的哲学。
7.3 与RxJS observables比较
虽然stores也是observable模式，但：
- API更加简单易用
- 与Svelte模板深度集成
- 学习曲线更低
对于需要复杂流处理的场景，仍然可以结合RxJS使用。
8. 实战案例：构建购物车系统
让我们用一个完整的购物车示例展示stores的实际应用：
// stores/cart.js export function createCart() { const { subscribe, set, update } = writable([]); return { subscribe, addItem: item => update(items => { const existing = items.find(i => i.id === item.id); return existing ? items.map(i => i.id === item.id ? {...i, qty: i.qty + 1} : i) : [...items, {...item, qty: 1}]; }), removeItem: id => update(items => items.filter(i => i.id !== id)), updateQty: (id, qty) => update(items => items.map(i => i.id === id ? {...i, qty} : i) ), clear: () => set([]) }; } export const cart = createCart(); export const totalItems = derived( cart, $cart => $cart.reduce((sum, item) => sum + item.qty, 0) ); export const subtotal = derived( cart, $cart => $cart.reduce((sum, item) => sum + (item.price * item.qty), 0) );在组件中使用：
<!-- Cart.svelte --> <script> import { cart, totalItems, subtotal } from '../stores/cart'; </script> <div class="cart"> <h2>Your Cart ({$totalItems})</h2> {#if $totalItems === 0} <p>Your cart is empty</p> {:else} <ul> {#each $cart as item (item.id)} <li> {item.name} - ${item.price} × <input type="number" min="1" bind:value={item.qty} on:change={() => cart.updateQty(item.id, item.qty)} > <button on:click={() => cart.removeItem(item.id)}> Remove </button> </li> {/each} </ul> <p>Subtotal: ${$subtotal.toFixed(2)}</p> <button on:click={() => cart.clear()}>Clear Cart</button> {/if} </div>这个实现展示了如何将多个stores组合起来构建一个完整的功能模块，同时保持代码的清晰和可维护性。
