Svelte存储系统通过可写、只读和派生存储实现高效状态管理。1. 可写存储(writable)用于跨组件共享可变状态,如count.set(10)更新值;2. 派生存储(derived)基于其他存储计算新值,仅在订阅时激活;3. 自定义存储可集成持久化逻辑,如将theme保存至localStorage;所有组件导入同一存储实例即可响应更新,配合$前缀实现简洁的响应式编程。

Svelte 的存储系统是管理状态的核心机制,它简单、高效且无需额外库。通过 可写存储(writable store)、只读存储(readable store) 和 派生存储(derived store),你可以轻松实现组件间的状态共享与响应式更新。
创建和使用可写存储
可写存储允许你设置、更新和订阅值。适合管理需要在多个组件中修改的状态,比如用户信息或主题模式。
import { writable } from 'svelte/store'; export const count = writable(0);在组件中使用:
import { count } from './stores.js'; $count += 1; // 使用 $ 前缀自动订阅并获取值调用 set() 或 update() 修改状态:
- count.set(10):直接赋值
- count.update(n => n + 1):基于当前值更新
创建派生存储
当你需要基于一个或多个存储计算新值时,使用 derived。例如从两个数值得出总和。
import { derived } from 'svelte/store'; export const sum = derived([a, b], ([$a, $b]) => $a + $b);只要依赖的存储变化,派生存储会自动更新,并只在被订阅时活跃(auto-subscription),节省资源。
在组件间共享状态
将存储定义在单独文件中(如 stores.js),然后在任意组件导入使用。所有组件访问的是同一实例,实现状态共享。
比如切换深色模式:
export const darkMode = writable(false);任意组件中执行 darkMode.set(true),其他订阅了它的组件会立即响应更新。
自定义存储逻辑
你可以创建带有副作用或持久化逻辑的自定义存储。例如将用户偏好保存到 localStorage:
function createPersistentStore(key, initialValue) { const saved = localStorage.getItem(key) || initialValue; const store = writable(saved); store.subscribe(value => localStorage.setItem(key, value)); return store; } export const theme = createPersistentStore('theme', 'light');这样状态变化时会自动保存,页面刷新后仍能恢复。
基本上就这些。Svelte 存储轻量直观,配合 $ 符号语法让响应式编程变得自然,不复杂但容易忽略细节。掌握 writable、derived 和自定义模式,就能应对大多数状态管理需求。










