Svelte如何订阅多个store的值？Vue转Svelte的store使用疑问

多Store订阅最优解决方案 #

1. 首选：Svelte内置自动订阅语法（推荐）

Svelte专门设计了$前缀的自动订阅语法，完全不需要手动编写subscribe、unsubscribe逻辑，框架会自动完成依赖收集和组件销毁时的订阅回收，没有内存泄漏风险，是所有组件内订阅场景的最优解。
写法如下：

<script>
import { count, timer } from '$stores/countAndTimer';
</script>

<!-- 直接用$+store名即可拿到实时值，赋值、渲染都可以直接用 -->
<div>计数：{$count}</div>
<div>计时：{$timer}</div>

<script>
// 脚本内也可以直接读取、监听
$: if ($count > 10) console.log('计数超过10')
</script>

这个语法和你熟悉的Vue响应式变量用法类似，没有额外的心智负担，完全不需要处理订阅相关的变量绑定问题。

2. 手动订阅场景的优化写法

如果你是在非Svelte组件的普通JS/TS文件中使用，确实需要手动管理订阅，可以用批量处理的方式简化代码，不需要单独声明每个unsubscribe变量：

import { onDestroy } from 'svelte';
import { count, timer } from '$stores/countAndTimer';

let count_value, timer_value;
// 所有订阅返回的unsubscribe函数统一存入数组
const unsubscribes = [
  count.subscribe(value => count_value = value),
  timer.subscribe(value => timer_value = value)
];

// 销毁时批量执行所有unsubscribe
onDestroy(() => unsubscribes.forEach(unsub => unsub()));

注：你尝试的写法里有个小笔误，timer的订阅回调里把timer_value写成了count_timer，会导致赋值失败，实际使用时注意修正即可。

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