Svelte 最新中文文档教程（15）—— Stores

头像
冴羽
     浙江
    阅读 6 分钟
    头图

    前言

    Svelte，一个语法简洁、入门容易，面向未来的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

    image.png

    Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。

    目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。

    我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

    虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。

    欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上前端大佬成长之路。

    Stores

    <!-- - 如何使用

    • 如何编写
    • TODO 应该将 store 方法的详细信息归属于参考部分吗？ -->

    store 是一个对象，允许通过简单的 store 合约（store contract） 对值进行响应式访问。 svelte/store 模块 包含满足此合约的最小 store 实现。

    每当您引用 store 时，您都可以在组件内通过添加 $ 前缀访问它的值。这会导致 Svelte 声明带前缀的变量，在组件初始化时订阅 store，并在适当的时候取消订阅。

    对 $ 前缀变量进行赋值要求该变量是一个可写的 store ，并将导致对 store 的 .set 方法的调用。

    请注意，store 必须在组件的顶层声明 —— 例如，不能在 if 块或函数内部声明。

    局部变量（不是 store 的值）不能有 $ 前缀。

    <script>
  import { writable } from 'svelte/store';

  const count = writable(0);
  console.log($count); // 输出 0

  count.set(1);
  console.log($count); // 输出 1

  $count = 2;
  console.log($count); // 输出 2
</script>

    何时使用 store

    在 Svelte 5 之前， store 是创建跨组件响应式状态或提取逻辑的首选解决方案。随着符文的出现，这些用例已大大减少。

    • 在提取逻辑时，最好利用符文的通用响应性：你可以在组件顶层之外使用符文，甚至可以将它们放入 JavaScript 或 TypeScript 文件（使用 .svelte.js 或 .svelte.ts 文件后缀）。
    • 在创建共享状态时，你可以创建一个包含所需值的 $state 对象，然后操作该状态。
    /// file: state.svelte.js
export const userState = $state({
  name: 'name'
  /* ... */
});
    <!--- file: App.svelte --->
<script>
  import { userState } from './state.svelte.js';
</script>

<p>用户名: {userState.name}</p>
<button onclick={() => {
  userState.name = '新名字';
}}>
  修改名字
</button>

    当你有复杂的异步数据流，或需要手动控制更新值或监听变化时， store 仍然是一个不错的解决方案。如果你熟悉 RxJs 并希望复用这些知识，$ 也会对你很有帮助。

    svelte/store

    svelte/store 模块包含满足 store 合约的最小 store 实现。它提供了创建可以从外部更新的 store 、只能从内部更新的 store 以及组合和派生 store 的方法。

    writable

    一个函数，可以创建一个从“外部”组件设置值的 store。store 是一个额外带有
    set 和 update 方法的对象。

    set 是一个方法，它接受一个参数，该参数是要设置的值。如果 store 值与参数值不相等，则 store 值将设置为参数值。

    update 是一个方法，它接受一个参数，该参数是一个回调函数。回调函数以现有的 store 值作为其参数,并返回要设置到 store 中的新值。

    /// file: store.js
import { writable } from 'svelte/store';

const count = writable(0);

count.subscribe((value) => {
  console.log(value);
}); // 输出 '0'

count.set(1); // 输出 '1'

count.update((n) => n + 1); // 输出 '2'

    如果 writeable 的第二个参数传递了一个函数，它将在订阅者数量从 0 到 1 时被调用（而不是从 1 到 2，等等）。

    该函数将接收一个 set 函数，用于改变 store 的值，以及一个 update 函数，其工作原理类似于 store 的 update 方法，接受一个回调函数，根据旧值计算 store 的新值。它必须返回一个 stop 函数，当订阅者数量从 1 到 0 时调用该函数。

    /// file: store.js
import { writable } from 'svelte/store';

const count = writable(0, () => {
  console.log('得到一个订阅者');
  return () => console.log('没有更多的订阅者');
});

count.set(1); // 不执行

const unsubscribe = count.subscribe((value) => {
  console.log(value);
}); // 输出 '得到一个订阅者'，然后输出 '1'

unsubscribe(); // 输出 '没有更多的订阅者'

    注意，当 writable 的值被销毁时，例如当页面刷新时，其值会丢失。但是，你可以编写自己的逻辑，将值同步到比如 localStorage 中。

    readable

    创建一个不能从“外部”设置值的 store ，第一个参数是 store 的初始值，第二个参数与 writable 的第二个参数相同。

    import { readable } from 'svelte/store';

const time = readable(new Date(), (set) => {
  set(new Date());

  const interval = setInterval(() => {
    set(new Date());
  }, 1000);

  return () => clearInterval(interval);
});

const ticktock = readable('tick', (set, update) => {
  const interval = setInterval(() => {
    update((sound) => (sound === 'tick' ? 'tock' : 'tick'));
  }, 1000);

  return () => clearInterval(interval);
});

    derived

    从一个或多个其他 store 派生出一个 store 。回调在第一个订阅者订阅时运行,然后在 store 依赖关系发生变化时运行。

    在最简单的版本中，derived 接受一个 store ，回调返回一个派生值。

    // @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
  const a: Writable<number>;
}

export {};

// @filename: index.ts
// ---cut---
import { derived } from 'svelte/store';

const doubled = derived(a, ($a) => $a * 2);

    回调可以通过接受第二个参数 set 和一个可选的第三个参数 update 异步设置一个值，并在适当时调用它们中的一个或两个。

    在这种情况下，您还可以向 derived 传递第三个参数 —— 派生 store 在第一次调用 set 或 update 之前的初始值。如果未指定初始值，则 store 的初始值为 undefined。

    // @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
  const a: Writable<number>;
}

export {};

// @filename: index.ts
// @errors: 18046 2769 7006
// ---cut---
import { derived } from 'svelte/store';

const delayed = derived(
  a,
  ($a, set) => {
    setTimeout(() => set($a), 1000);
  },
  2000
);

const delayedIncrement = derived(a, ($a, set, update) => {
  set($a);
  setTimeout(() => update((x) => x + 1), 1000);
  // 每次 $a 产生一个值时，这个也会产生两个值
  // $a 立即输出然后 $a + 1 一秒后输出
});

    如果你从回调中返回一个函数，它将在以下情况被调用：

    1. 回调再次运行的时候
    2. 最后一个订阅者取消订阅的时候
    // @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
  const frequency: Writable<number>;
}

export {};

// @filename: index.ts
// ---cut---
import { derived } from 'svelte/store';

const tick = derived(
  frequency,
  ($frequency, set) => {
    const interval = setInterval(() => {
      set(Date.now());
    }, 1000 / $frequency);

    return () => {
      clearInterval(interval);
    };
  },
  2000
);

    在这两种情况下，可以将一个参数数组作为第一个参数传递，而不是单个 store 。

    // @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
  const a: Writable<number>;
  const b: Writable<number>;
}

export {};

// @filename: index.ts

// ---cut---
import { derived } from 'svelte/store';

const summed = derived([a, b], ([$a, $b]) => $a + $b);

const delayed = derived([a, b], ([$a, $b], set) => {
  setTimeout(() => set($a + $b), 1000);
});

    readonly

    这个简单的辅助函数使得 store 只读。你仍然可以使用这个新的可读 store 订阅原始 store 的变化。

    import { readonly, writable } from 'svelte/store';

const writableStore = writable(1);
const readableStore = readonly(writableStore);

readableStore.subscribe(console.log);

writableStore.set(2); // console: 2
// @errors: 2339
readableStore.set(2); // ERROR

    get

    通常，你应该通过订阅 store 并随着时间变化使用其值来读取 store 的值。偶尔，你可能需要检索未订阅的 store 的值。get 允许你这样做。

    [!NOTE] 这样做背后是通过创建一个订阅、读取值、再然后取消订阅来实现的。因此，不建议在频繁使用的代码路径中使用。
    // @filename: ambient.d.ts
import { type Writable } from 'svelte/store';

declare global {
  const store: Writable<string>;
}

export {};

// @filename: index.ts
// ---cut---
import { get } from 'svelte/store';

const value = get(store);

    store 合约

    // @noErrors
store = { subscribe: (subscription: (value: any) => void) => (() => void), set?: (value: any) => void }

    你可以通过实现 store 合约（store contract） 创建自己的 store ，而不依赖于 svelte/store：

    1. store 必须包含一个 .subscribe 方法，该方法必须接受一个订阅函数作为参数。此订阅函数必须在调用 .subscribe 时立即和同步地传入 store 的当前值进行调用。无论何时 store 的值发生变化，所有激活的订阅函数都必须被同步调用。
    2. .subscribe 方法必须返回一个取消订阅函数。调用取消订阅函数必须停止其订阅，并且 store 不得再次调用其相应的订阅函数。
    3. 一个 store 可以 可选的 包含一个 .set 方法，该方法必须接受一个新的 store 值作为参数，并同步调用 store 所有激活的订阅函数。这样的 store 称为 可写的 store（writable store）。

    为了与 RxJS Observables 互操作性，.subscribe 方法也可以返回一个带有 .unsubscribe 方法的对象，而不是直接返回取消订阅函数。但请注意，除非 .subscribe 同步调用订阅（这是 Observable 规范中并不要求），否则 Svelte 会将 store 的值视为 undefined，直到它这样做。

    Svelte 中文文档

    本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。

    系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

    此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog

    欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上前端大佬成长之路。

    前端javascriptsveltesveltekitvue.js
    冴羽
    9.4k 声望6.3k 粉丝
    « 上一篇
    Svelte 最新中文文档教程（14）—— 特殊元素
    下一篇 »
    Svelte 最新中文文档教程（16）—— Context（上下文）

    引用和评论

    推荐阅读
    头像
    Svelte 最新中文文档教程（16）—— Context（上下文）

    冴羽

    头像
    100个React最佳实践小技巧

    夕水赞 35阅读 10.6k评论 3

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 16阅读 23.7k评论 18

    头像
    2024最全ECharts 实战大全（速记版+资源）

    程序员海军赞 11阅读 3.4k

    头像
    CSS 如何模拟“真实的”进度条？

    XboxYan赞 11阅读 4.2k评论 2

    头像
    如何在仓库中添加只对自己生效的.gitignore规则？

    热饭班长赞 4阅读 1.7k

    头像
    在ONES的工作体验分享

    执笔看墨花开赞 4阅读 3.5k

    0 条评论
    得票最新