Svelte中如何利用派生存储的旧值计算最大/最小值

要在派生存储（derived store）中获取上一次的计算值，Svelte没有直接提供内置API，但可以通过以下两种常用方式实现：

方法一：利用闭包保存历史状态 #

在派生存储外部定义变量，通过闭包保留上一次的生成结果，每次更新派生存储时基于该变量计算新值：

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

const base_values = writable({ x: 0, y: 0 });

// 初始化历史状态，与派生存储返回结构一致
let previousGenerated = { a: 0, b: 0, min_a: 0, max_a: 0, min_b: 0, max_b: 0 };

const generated_values = derived(base_values, (changed_values) => {
  const a = Math.sin(changed_values.x);
  const b = Math.cos(changed_values.y);

  // 基于历史值计算新的min/max
  const min_a = Math.min(a, previousGenerated.a);
  const max_a = Math.max(a, previousGenerated.a);
  const min_b = Math.min(b, previousGenerated.b);
  const max_b = Math.max(b, previousGenerated.b);

  // 更新历史状态为当前值
  previousGenerated = { a, b, min_a, min_b, max_a, max_b };

  return { a, b, min_a, min_b, max_a, max_b };
});

方法二：自定义存储实现灵活状态管理 #

创建自定义存储，订阅base store的变化，利用update方法直接获取当前存储的旧值进行计算：

import { writable } from 'svelte/store';

const base_values = writable({ x: 0, y: 0 });

function createGeneratedStore(baseStore) {
  // 初始化自定义存储的初始状态
  const { subscribe, update } = writable({
    a: 0, b: 0, min_a: 0, max_a: 0, min_b: 0, max_b: 0
  });

  // 订阅base store的变化，触发更新逻辑
  const unsubscribe = baseStore.subscribe(({ x, y }) => {
    update(currentState => {
      const a = Math.sin(x);
      const b = Math.cos(y);

      return {
        a,
        b,
        min_a: Math.min(a, currentState.a),
        max_a: Math.max(a, currentState.a),
        min_b: Math.min(b, currentState.b),
        max_b: Math.max(b, currentState.b)
      };
    });
  });

  // 返回自定义存储，包含订阅和取消订阅方法
  return {
    subscribe,
    unsubscribe
  };
}

const generated_values = createGeneratedStore(base_values);

注意事项 #

• 闭包方式需确保previousGenerated的初始值符合第一次计算逻辑，避免出现错误的初始min/max。
• 自定义存储更适合复杂状态管理场景，非组件环境使用时，记得在不需要时调用unsubscribe清理订阅，防止内存泄漏。

内容的提问来源于stack exchange，提问作者user9559682