全局状态应追求精准而非全面，组件只订阅所需字段以避免无效更新；用storetorefs解构、computed封装派生逻辑、路由级按需加载store、优先使用自定义组合式函数管理局部状态。
全局状态不是越“全”越好，而是越“准”越高效。组件只订阅自己真正用到的状态字段，不响应无关变更，才能避免无效更新和性能拖累。
精准解构：用 storeToRefs 只取所需
直接解构 store 会触发整个 store 的响应式代理，哪怕只读一个字段，其他字段变动也会让组件重渲染。正确做法是用 storeToRefs 解构，它返回的是 ref 包裹的响应式引用，仅对实际访问的字段建立依赖。
- ✅ 正确写法：const { username, avatar } = storeToRefs(userStore)
- ❌ 避免写法：const { username, avatar, token, permissions } = userStore（即使只用前两个）
- 注意：解构后变量需通过 .value 访问，模板中可直接使用（Vue 自动解包）
惰性计算：用 computed 封装派生逻辑
频繁读取、组合多个状态字段时，不要在模板里反复调用方法或写复杂表达式。把逻辑收进 computed，既提升可读性，又保证只在依赖变化时重新执行。
- 比如购物车总价：const totalPrice = computed(() => cart.items.reduce((sum, item) => sum + item.price * item.qty, 0))
- 避免在 v-for 中重复计算：不要把 reduce 写在模板里，也不要每次 render 都调用函数
- getter 内部也适用此原则，Pinia 的 getters 天然支持惰性求值
按需加载 Store：路由级动态注册
不是所有 store 都要在应用启动时加载。对低频模块（如后台管理、报表中心），应延迟到用户进入对应路由时才导入并 use。
- 在路由定义中配合 import()：{ path: '/admin', component: () => import('./views/Admin.vue'), beforeEnter: async () => { await import('@/stores/admin') } }
- 在 setup 中动态调用：const adminStore = await import('@/stores/admin').then(m => m.useAdminStore())
- 搭配 defineStore 的 setup 语法，能自然实现状态隔离与 GC 友好
局部状态优先：Composition API 自建模块更轻量
跨 2–3 个组件共享状态？未必需要 Pinia。用 useXXX() 自定义组合式函数，既能复用逻辑，又不污染全局。
- 例如 useTheme() 返回 theme、toggleTheme、syncWithSystem 等，内部用 reactive 或 ref 管理
- 组件按需导入：import { useTheme } from '@/composables/useTheme'
- 优势明显：无额外包体积、无 store 初始化开销、逻辑与组件生命周期一致
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
