Vue3+TS自定义状态管理失效：组件间状态无法同步

你的问题出在错误替换了reactive对象中嵌套的ref引用，导致响应式关联断裂，其他组件无法读取到更新后的值。

问题根源 #

你在store.ts里把ref对象放进reactive对象后，Vue会自动解包ref，所以store.value一开始等价于valueOriginal.value。但当你在componentA中执行this.store.value = "Modified by componentA.vue"时，是把store对象里的value属性从原来的ref对象直接替换成了普通字符串，这就切断了和valueOriginal的关联——componentB读取的还是原来valueOriginal这个ref的初始值。

两种修复方案 #

方案一：保留嵌套ref，修改ref的内部值

不需要改动store.ts，只需要在修改值时操作ref的value属性：

<!-- componentA.vue -->
import { store } from "./store";
// ...
console.log("mounted with store object value: ", this.store.value);
// 直接修改ref的value，而非替换整个ref对象
this.store.value.value = "Modified by componentA.vue";
console.log("Modified store object value: ", this.store.value);

这样store.value始终指向原来的ref对象，修改内部值后，所有引用该store的组件都能同步拿到最新值。

方案二：直接使用reactive对象（更简洁）

如果不需要单独的ref变量，直接用reactive定义整个状态对象：

// store.ts
export const store = reactive({ value: "defaultValue" });

然后在组件中直接修改即可：

<!-- componentA.vue -->
import { store } from "./store";
// ...
this.store.value = "Modified by componentA.vue";

<!-- componentB.vue -->
import { store } from "./store";
// ...
console.log("mounted with store object value: ", this.store.value); // 能读到修改后的值

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