Svelte 5：如何跨组件/模块响应式传递原始值

我有几十个响应式原始值（例如div_status = "frozen"），需要在组件/模块之间传递，包括+page.svelte文件和svelte.js模块。这些值代表UI的可变属性，会影响样式以及用户交互事件监听器中的if-else块。关键要求是拖拽级别的响应性——UI必须在用户拖拽过程中（比如悬停在放置区域、拖拽特定距离等场景）实时做出响应。

迁移到Svelte 5时，我纠结于该用stores还是$state()：

• 用stores的问题：没法在svelte.js模块的导出函数里使用，而且重构起来很麻烦。
• 用$state()处理原始值（比如$state("frozen")）的问题：为了避免重新赋值覆盖状态，不得不复杂化代码——要么把多个原始值打包成对象/数组，要么给单个值做包装（例如div_status = {value: "frozen"}）。

另外我还不确定是否要用到getter/setter，以及选择stores还是$state()是否和我用context API还是仅通过props传递有关。总之我需要一个易于重构的解决方案。

最终解决方案 #

我最终采用了$state()结合getter/setter的方案。在Svelte 5官方文档发布前看到这篇内容的读者，强烈推荐观看Rich Harris的相关视频，里面会解释如何实现这个方案，以及为什么从表面看代码量并没有增加。

我已经不再使用stores，但如果有人感兴趣，我会单独给出可在svelte.js文件中运行的stores实现代码。

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