如何订阅两个及以上Svelte store并在变更时触发统一回调

你提到的「derived store + 单次订阅」的方案就是Svelte生态下实现多store合并监听的最优方案，完全满足你不需要调用get()就能获取所有store最新值、减少冗余代码的需求。

方案优势 #

• 完全基于Svelte官方原生API，不需要额外封装，稳定性有保障
• 自动处理多store更新时序：哪怕多个关联store同时变更，回调只会触发一次，不会出现重复执行的问题
• 维护成本极低：如果后续需要新增监听的store，只需要往derived的第一个参数数组里加对应store即可
• 自动合并取消订阅逻辑：只需要调用一次返回的取消订阅函数，就能解绑所有关联store的监听，不需要手动维护多个取消订阅的变量

可选替代方案：自定义通用监听工具 #

如果你不想额外声明一个无业务含义的derived store变量，也可以自己封装一个通用的多store监听函数：

import { derived } from 'svelte/store'

// 通用工具函数：监听多个store变化，变更时执行回调，返回取消订阅函数
export function subscribeMany(stores, callback) {
  return derived(stores, (values) => values).subscribe(values => {
    callback(...values)
  })
}

// 使用示例
const unsub = subscribeMany([s1, s2], (s1Value, s2Value) => {
  onStoreChange('custom subscribe', s1Value, s2Value)
})

补充说明 #

你之前单独定义derived store但不触发回调的问题属于Svelte store的正常设计：所有Svelte store都是懒执行的，只有存在活跃订阅者时才会运行内部逻辑，只要你给derived store调用了subscribe方法，内部逻辑就会正常执行，不存在生命周期问题。

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