Pinia 的状态选择器：如何高效获取 Store 的部分状态

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)

• 原理：减小每个响应式依赖的粒度，提升更新精度