在 vue 3 中监听 pinia 状态需保持响应性：推荐用 getter 函数方式 watch(() => store.count, ...)；多字段可用 storetorefs 解构后监听；嵌套属性可选路径监听或 deep: true；多状态组合变化支持数组或对象函数方式。
在 Vue 3 中监听 Pinia 状态库中某个特定属性的变化，关键在于确保被监听的值是响应式的，并且 watch 能正确建立依赖追踪。直接解构 store 属性会丢失响应性，所以必须用对的方式取值。
用函数形式监听单个属性
最常用也最推荐的方式：把访问 store 属性的过程包装成一个 getter 函数传给 watch。Vue 会自动追踪该函数内使用的响应式依赖。
- 适用于所有 state 字段、getters，甚至跨 store 的组合逻辑
- 首次执行时 oldVal 是 undefined，需注意判空
- 示例：watch(() => store.count, (n, o) => console.log('count 变了', o, '→', n))
用 storeToRefs 提取后监听
当组件中需要频繁使用多个 state 字段时，storeToRefs 能批量生成带 ref 包装的响应式引用，后续可直接传给 watch。
- 只适用于 state 中的原始字段，不适用于 getters 或 actions
- 避免手动写一堆 () => store.xxx，代码更简洁
- 示例：const { count, name } = storeToRefs(store); watch(count, (n) => {...})
监听嵌套对象或深层变化
如果属性是对象或数组，且你关心其内部字段变动（比如 user.profile.avatar），有两种方式：
- 监听具体路径：watch(() => store.user.profile.name, ...)
- 监听整个对象并开启 deep：watch(() => store.user, ..., { deep: true })（注意性能开销）
监听多个状态组合变化
当业务逻辑依赖多个字段共同变化时（如“购物车数量 + 登录态”决定是否显示结算按钮），可用数组或函数方式合并监听：
- 数组方式：watch([() => cart.count, () => auth.token], ([c, t]) => {...})
- 函数方式（更灵活）：watch(() => ({ count: cart.count, logged: !!auth.token }), ({ count, logged }) => {...})
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
