Svelte Store中如何取消update()更新操作？

Svelte 的 store 可以通过 store.update() 方法修改值，基础用法如下：

store.update((currentValue) => {
  return currentValue + 1;
});

但如果想在 update 的回调里通过逻辑判断取消更新（比如值达到阈值时不触发订阅者），直接返回 undefined 是无效的——这会把 store 的值设为 undefined，而非取消更新：

store.update((currentValue) => {
  // 错误：会将store值设为undefined
  if (currentValue >= 10) return;
  return currentValue + 1;
});

提前用 get(store) 判断再执行 update 虽然可行，但复杂场景下会导致代码冗余，不够优雅：

if (get(store) < 10) {
  store.update((currentValue) => {
    return currentValue + 1;
  });
}

更优解决方案 #

1. 返回当前值跳过更新

Svelte store 的 update 方法会对比回调返回的新值与当前值，若二者相等（原始值严格相等，引用类型则对比引用），则不会触发订阅者更新。利用这一点，我们可以直接返回当前值来“取消”更新：

store.update((currentValue) => {
  if (currentValue >= 10) return currentValue; // 返回原值，不触发更新
  return currentValue + 1;
});

这种方案简单直接，无需额外封装，适合大多数简单场景。

2. 封装带条件更新的自定义 store

如果需要频繁处理这类条件更新，可以封装一个扩展的 writable store，内置条件判断逻辑：

import { writable } from 'svelte/store';

function createConditionalStore(initialValue) {
  const { subscribe, update, set } = writable(initialValue);

  return {
    subscribe,
    set,
    // 自定义条件更新方法：返回undefined则跳过更新
    updateIf: (updater) => {
      update(current => {
        const nextValue = updater(current);
        // 若返回undefined或与当前值相等，则保持原值
        return nextValue === undefined || nextValue === current 
          ? current 
          : nextValue;
      });
    }
  };
}

// 使用示例
const count = createConditionalStore(0);

count.updateIf(current => {
  if (current >= 10) return; // 自动跳过更新
  return current + 1;
});

这种方案把判断逻辑封装起来，调用时更简洁，适合复杂场景或多处复用的情况。

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