如何用Svelte的存储管理状态？-js教程-PHP中文网

如何用Svelte的存储管理状态？

夜晨

发布： 2025-10-02 21:40:02

原创

730人浏览过

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

如何用svelte的存储管理状态？

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 和自定义模式，就能应对大多数状态管理需求。

以上就是如何用Svelte的存储管理状态？的详细内容，更多请关注php中文网其它相关文章！