直接解构 store 的 state 会丢失响应式，因解构使变量脱离 ref/reactive 代理变为普通值；应使用 storeToRefs 保持响应性，actions 可直接解构。
直接解构 store 的 state 会丢失响应式，这是 Pinia 最常见的误用点。根本原因是：解构出来的变量脱离了原始 ref 或 reactive 的代理上下文，变成了普通 JS 值。
为什么直接解构会丢失响应式
Vue 3 的响应式基于 Proxy（ref/reactive），而解构赋值本质是「取值 + 赋值」操作：
- const { count } = useCounterStore() → count 是一个普通数字，不是 ref，不触发视图更新
- count++ 只修改局部变量，store 内部的 count 并未变化
- 模板中 {{ count }} 不再响应 store.count 的变化
正确做法：用 storeToRefs 包装解构
storeToRefs 会把 store 中所有响应式的 state 和 getters 自动转为 ref，保留响应性，同时跳过 actions（它们本就是普通函数）：
- 导入：import { storeToRefs } from 'pinia'
- 使用：const { count, doubleCount } = storeToRefs(store)
- actions 可直接解构：const { increment } = store
其他安全的解构方式
如果只读、不修改，且不需要在模板中自动更新，可考虑以下替代方案：
- 在 template 中直接访问：
{{ store.count }}，无需解构 - 用 computed 包一层：
const count = computed(() => store.count) - 对单个字段做 shallowRef + watch（适合复杂逻辑，但不推荐日常使用）
特别注意 $patch 场景下的解构
当从接口返回数据中解构字段再写入 store 时，不要混合使用解构和 this.$patch 字面量形式：
- ❌ 错误：const { id, name, rest } = res.data; this.$patch({ id, name }) —— rest 里字段可能漏掉或类型不一致
- ✅ 推荐：this.$patch(state => Object.assign(state, rest)) —— 直接覆盖，无遗漏，响应式完整触发
