Svelte 5 替代 Store

• Links
  • Svelte
  • 介绍Svelte5
    Svelte5 中并没有弃用 Story，但是在未来版本中可能会慢慢退出框架，直到不再需要它们，因为 store 已经可以被 $state 与 $derived 所取代.

在 Svelte5 中，$state 和 $derived 可以离开 Svelte 组件在 TypeScript 或者 JavaScript 文件中使用，而不像 React 那样只能在组件中使用 useState。前提是需要将文件修改为 .svelte.ts 或者 .js 文件，以便于 Svelte 编译器能够识别，并编译符文。
一个使用 store 的例子

import { derived, writable } from "svelte/store";
 
export function createNumberInfo(initialValue: number = 0) {
  const value = writable(initialValue);
 
  const derivedInfo = derived(value, value => {
    return {
      value,
      label: value % 2 ? "Odd number" : "Even number",
    };
  });
 
  return {
    update(newValue: number) {
      value.set(newValue);
    },
    numberInfo: derivedInfo,
  };
}

使用 符文 来替代 Store

export function createNumberInfo(initialValue: number = 0) {
  let value = $state(initialValue);
  let label = $derived(value % 2 ? "Odd number" : "Even number");
 
  return {
    update(newValue: number) {
      value = newValue;
    },
    get value() {
      return value;
    },
    get label() {
      return label;
    },
  };
}

这里为什么要使用 get:

在任何给定时间点读取该状态时，会评估状态符文，如果状态是用于在 Svelte 组件绑定或者 $derived 表达式内部, 那么将设置一个订阅。用来在该状态更新时更新。如果不使用 get, 就不会有重新更新的作用，因为 value 和 label 将在返回值中就被读取和使用。这些原始值直接注入到了对象或者Svelte 组件绑定上，它们不是响应式的，永远不会更新。其他→ $state 工厂函数