Svelte中store更新后组件没重新渲染怎么办？

Mc.亚捷提问于 2026-03-01 21:28:23 阅读 13

框架

我在用Svelte的可写store管理状态，修改store值之后，页面上绑定的数据没更新，还是显示旧值。明明已经用了$store语法订阅了啊。

我试过在赋值后手动调用set()方法，也试过用update()，但组件就是不重新渲染。控制台打印store当前值是对的，但DOM没变。这是为啥？

我的store定义是这样的：

import { writable } from 'svelte/store';

export const count = writable(0);

组件里这样用：

<script>
  import { count } from './stores.js';
</script>

<p>{$count}</p>
<button on:click={() => $count += 1}>+1</button>

Svelte

我来解答赞 2 收藏

反馈

1 条解答

欧阳子硕 Lv1

看了你的代码，写法本身没问题，$count += 1 这种语法糖在 Svelte 里是合法的，会自动解包并调用 set。

问题大概率出在这几个地方：

第一，检查 store 实例是否被重复创建。如果你在某个地方又重新 writable(0) 了一遍，或者在 vite/rollup 的配置里模块被重复加载，那组件里 import 进来的可能根本不是你修改的那个 store 实例。控制台打印的值对，说明你打印的那个实例确实变了，但组件订阅的是另一个。可以在 store 文件里加个日志确认初始化了几次。

第二，热更新(HMR)有时候会搞出奇怪的状态残留，特别是开发环境下改了 store 文件后没刷新页面。试试完全刷新页面，或者重启 dev server。

第三，确认下





{$count}

顺便提一句安全相关的，如果你的 store 将来会存敏感数据或者从后端同步过来，记得在 update 里做数据校验和边界检查，别直接信任外部数据往里塞。还有生产环境把那个调试 subscribe 干掉，免得泄露状态到控制台。

如果上面这些都排除了还是不行，把完整的组件代码和 stores.js 贴出来看看，可能有其他地方覆盖了 $count 的值。

2026-03-01 22:03