const { count } = useCounterStore() 之后别的组件加一,当前组件里的 count 一直停在 0,控制台没有报错,DevTools 里 store 已经是 5,页面就是不动,等页面刷新才同步。乍看像缓存或者权限的锅,追下去往往不是。

import { storeToRefs } from 'pinia';
const { count } = storeToRefs(store);

追下去是这么回事:解构把响应式代理里的值取成普通变量,后续 store 再变也不会通知这个变量,等于拿了一份快照,state 本身没坏,坏的是这个引用,很难第一眼想到。

「Pinia 解构丢响应式」这个问题文档写得含糊,实际行为以当前版本为准,别照旧版本的结论套。测试环境和线上的差别,往往就在版本号和那几行被忽略的配置上。

线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。

具体做法是,用 storeToRefs 解构 state 和 getter 保留响应式;action 直接从 store 实例上取,不要跟着一起解构,否则同样失效;确实需要派生值时用 computed 包一层再使用,别直接算。

验收就看一点,另一处修改 count 后当前组件立刻同步显示,不需要刷新页面,也不用来回切页面。

作者 9823189