Svelte Store值无响应：点击更新不生效但setInterval可行

核心问题 #

你遇到的问题本质是Svelte响应式追踪的机制问题：

• get(styles)是一次性获取Store当前值的方法，它不会让Svelte建立对这个Store的订阅关系。所以你的$: console.log(get(styles))语句，只会在组件初始化时执行一次（此时Store值为undefined），后续Store更新时，Svelte感知不到这个依赖，不会重新运行这条语句。
• 而setInterval是主动定时调用get(styles)，相当于每次都主动去拉取最新值，所以能看到更新后的结果。

正确的写法 #

要让Svelte自动追踪Store的变化，你需要使用Svelte提供的自动订阅语法（$前缀），而不是手动调用get()：

$: console.log($styles);

这样Svelte会自动订阅styles Store，每当Store的值通过set/update更新时，这条语句就会重新执行，打印最新的样式对象。

额外说明 #

另外需要注意：getComputedStyle返回的是一个实时绑定到元素的CSSStyleDeclaration对象——也就是说，即使你不调用styles.update，只要目标元素的样式发生变化，这个对象的属性值也会跟着变。但Svelte的Store只会在你调用set/update方法时才通知订阅者。如果需要追踪元素样式的实时动态变化，你可能需要结合元素的MutationObserver监听样式变更，再手动更新Store。

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