Vue3状态管理如何使用 Pinia 的 storeToRefs 保持解构响应式

storeToRefs 是专为解构 Pinia store 设计的工具，它将 state 和 getters 转为 ref 以保持响应式；直接解构会脱离 Proxy 监控导致视图不更新，而 storeToRefs 自动过滤 actions，确保安全解构。

直接解构 Pinia store 会丢失响应式，storeToRefs 是专为解决这个问题设计的工具。它把 store 中的 state 和 getters 转换成 ref，确保解构后变量仍能触发视图更新。

为什么不能直接解构 store？

Pinia store 是一个 reactive 对象，内部用 Proxy 实现响应式追踪。一旦你写 const { count } = useCounterStore()，得到的 count 就是普通数值，脱离了 Proxy 监控链路——修改它不会通知 Vue，界面也不会刷新。

1. 类似把鱼捞出水：值还在，但“活”没了
2. getters 同样失效：解构后的 getter 不再自动重计算
3. actions 不受影响，因为它们本就是函数，不依赖响应式追踪

正确使用 storeToRefs 的方式

调用 storeToRefs(store)，它会遍历 store，只为 state 和 getters 创建 ref，然后返回一个新对象。解构这个对象，就能安全使用。

1. 写法示例：const { count, doubleCount } = storeToRefs(useCounterStore())
2. 模板中直接用：{{ count }} 或 {{ doubleCount }}（无需 .value）
3. 脚本中读取要加 .value：console.log(count.value)
4. 修改也要通过 .value：count.value++（或走 action 更推荐）

和 toRefs 的区别别搞混

toRefs 是 Vue 提供的通用工具，适用于 reactive({}) 对象；storeToRefs 是 Pinia 专属，自动过滤掉 actions 等非响应式属性，只处理 state 和 getters。

1. 对 store 用 toRefs 可能把 action 也转成 ref，造成意外行为
2. 对 store 必须用 storeToRefs，这是语义和实现层面的明确分工
3. 两者返回结构一致，但适用对象不同，不可互换

嵌套或动态字段怎么处理？

如果需要解构的是深层属性（比如 user.profile.name）或动态键（如 things[id]），storeToRefs 本身不支持——它只作用于 store 的顶层 state/getters。

1. 推荐用 computed 包一层：const userName = computed(() => store.user?.profile?.name)
2. 需要双向绑定时，显式写 getter/setter：computed({ get: () => ..., set: (v) => ... })
3. 避免对 store.things[id] 直接调用 toRefs，它不是 reactive 对象的直接属性