Pinia性能优化核心在于状态设计与访问方式：扁平化结构、用storeToRefs保持响应性、$patch批量更新、getter仅做简单派生、复杂逻辑移入action。
Pinia 本身轻量且响应式机制高效，但状态存取效率不只取决于库本身，更取决于你怎么组织、访问和更新状态。真正拖慢应用的，往往是深层嵌套访问、频繁触发重渲染、或在 getter 中做重计算——这些都可以通过明确的设计约束来规避。
状态结构扁平化，避免深层嵌套
深层嵌套对象（如 state.users[0].profile.address.city）不仅读写慢，还会让 Vue 的响应式追踪变复杂，容易引发不必要的更新。建议把关联数据拆开存储，用 ID 做映射。
- ✅ 推荐：用
userMap: { '1': { id: 1, name: 'Alice' } }+userIds: ['1', '2'] - ❌ 避免：
users: [{ id: 1, profile: { address: { city: 'Beijing' } } }] - 这样访问
userMap[id].name是 O(1)，过滤、查找、更新都更快，也方便配合$patch批量操作
用 storeToRefs 解构时保持响应性
直接解构 store 属性会丢失响应式连接，导致 UI 不随状态变化而更新。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- ❌ 错误写法：
const { count, name } = useCounterStore()→ 解构后变量非响应式 - ✅ 正确做法：
const { count, name } = storeToRefs(useCounterStore()) - 尤其在 setup 中配合
toRef或computed二次派生时，必须用storeToRefs或显式toRef(store, 'xxx')
批量更新优先用 $patch，少用逐个赋值
连续修改多个 state 字段，若分开写会触发多次组件更新；$patch 把它们合并为一次响应式变更。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
store.$patch({ a: 1, b: 'x', c: true }) - ✅ 复杂逻辑用函数形式：
store.$patch(state => { state.list.push(item); state.total += item.price; }) - ⚠️ 注意：不要在
$patch函数里调用异步操作或副作用，它只用于同步状态变更
Getter 只做简单派生，重逻辑移入 Action
Getter 在每次依赖项变化时都会重新执行。如果里面包含 filter/map/axios 调用，就会反复执行，卡顿明显。
- ✅ 简单计算可放 getter：
getters.activeCount: (state) => state.items.filter(i => i.active).length - ✅ 复杂报表、格式化、远程请求等，应放在 action 中缓存结果：
actions.loadReport() { if (!this.reportCache) this.reportCache = await api.getReport(); } - 需要缓存时，可用
ref或computed封装，避免重复计算
