storetorefs用于保持pinia状态解构后的响应性，它将state中响应式字段转为ref，不处理getters和actions；适合仅读取固定字段的场景，避免直接解构导致响应式丢失。
Pinia 本身没有内置的“状态选择器”（如 Redux 的 useSelector），但通过组合式 API 和工具函数，可以高效、安全地获取 Store 的部分状态，避免不必要的响应式绑定和性能损耗。
用 storeToRefs 保持响应性并精准解构
直接解构 Store 实例会丢失响应性，这是最常见误区。正确做法是使用 storeToRefs —— 它只对 state 中的响应式字段做 ref 包装，不作用于 getters 或 actions。
- 适合场景：只需要读取几个固定字段，且希望在模板或逻辑中保持响应式更新
- 写法示例：
import { useCounterStore } from '@/stores/counter' import { storeToRefs } from 'pinia' const counter = useCounterStore() const { count, title } = storeToRefs(counter) // ✅ 响应式解构 // const { count } = counter // ❌ 普通解构 → 失去响应性 - 注意：
storeToRefs不处理嵌套对象的深层响应性，若 state 是复杂结构（如{ user: { name: '', age: 0 } }），解构user后仍需用toRef或computed提取子属性
用 computed 精确派生，按需计算
当需要从 state 中提取加工后值（如过滤数组、格式化字符串），或仅依赖部分字段时，computed 是更轻量、可控的选择。
- 优势：惰性求值 + 缓存，不触发无关依赖的响应追踪
- 写法示例：
import { useArticleStore } from '@/stores/article' import { computed } from 'vue' const articleStore = useArticleStore() // 只监听 articles.length，不追踪整个 articles 数组 const articleCount = computed(() => articleStore.articles.length) // 只取前端类文章，且仅在 articles 变化时重算 const frontArticles = computed(() => articleStore.articles.filter(a => a.category === '前端技术') ) - 对比 getter：组件内
computed更灵活（可传参、闭包捕获局部变量），而 Store 内 getter 更适合跨组件复用逻辑
用 $subscribe 监听局部状态变更（非响应式读取）
如果只是「感知变化」而非「绑定视图」，比如日志记录、埋点或触发副作用，$subscribe 可精确监听指定字段，避免创建冗余响应式引用。
- 写法示例：
const counter = useCounterStore() counter.$subscribe((mutation, state) => { // 只关心 count 变化，忽略其他字段 if (mutation.storeId === 'counter' && mutation.type === 'direct') { console.log('count updated to:', state.count) } }, { detached: true }) - 关键参数：
detached: true表示该订阅不随组件卸载自动清除，需手动管理；若在 setup 中使用，通常省略此选项，由 Pinia 自动清理 - 注意：它返回的是快照值（非响应式），不能用于模板渲染
多 Store 场景下避免交叉响应（进阶技巧）
当一个组件同时使用多个 Store，又只需其中某几个字段时，不要把全部 Store 实例都传入同一个 computed 或解构——这会扩大响应依赖范围。
- 错误示范：
const user = useUserStore() const cart = useCartStore() // ❌ 把两个 store 都放进 computed，任一变化都会触发重算 const summary = computed(() => `${user.name} has ${cart.items.length} items`) - 推荐写法：拆分为独立计算属性，或用
storeToRefs分别解构所需字段const { name } = storeToRefs(useUserStore()) const { items } = storeToRefs(useCartStore()) const itemCount = computed(() => items.value.length) const displayName = computed(() => name.value) - 原理：减小每个响应式依赖的粒度，提升更新精度
