使用 $patch 一次性合并更新 state 可避免多次响应式通知和重渲染，提升性能；对象式适用于根层级字段明确更新，函数式适合依赖当前值的逻辑计算，复杂表单应聚合更新并配合 $subscribe 控制副作用。
直接在 action 里多次赋值 state 字段，会触发多次响应式通知和组件重渲染。用 $patch 一次性合并更新，就能把多次变更压成一次响应，性能明显更好。
对象式 $patch：适合字段明确、同层级更新
当你知道要改哪些字段，且它们都在 state 根层时，传一个对象最简洁：
store.$patch({ name: '小王', age: 25, role: 'admin' })- 内部自动做浅合并，只更新传入的字段，其他不变
- TypeScript 下字段名写错会有类型提示，不容易出错
- 不支持嵌套路径（比如
{ 'user.email': 'x@y.com' }无效）
函数式 $patch：适合需读取当前值或做逻辑判断
需要基于现有状态计算新值时，用函数更安全灵活：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
store.$patch(state => { state.count++; if (state.items.length > 5) state.items.shift(); })- 操作的是响应式代理，不能解构
state，也不能重新赋值state = {...} - 适合数组增删、条件覆盖、递增计数等场景
- 对含 Map、Set 或 Class 实例的状态，建议配合明确赋值使用
复杂表单场景：聚合更新时机，避免频繁 patch
多个输入框同步到 store 时，别在每次 input change 就调一次 $patch：
- 用
storeToRefs提取需要监听的字段（如name、email），减少响应范围 - 在提交、失焦或防抖后，再统一
store.$patch({ name, email, phone }) - 频繁小更新反而增加开销，聚合后一次提交更高效
配合 $subscribe 控制副作用触发
如果更新后要发请求、存本地或打日志，别在每个赋值后写逻辑：
- 用
store.$subscribe监听最终 patch 完成 store.$subscribe((mutation) => { if (mutation.type === 'patch object') saveToLocalStorage(store.$state) })- 加
{ detached: true }可全局监听，避免重复注册 - 确保副作用只执行一次，而不是被拆散的多次更新反复触发
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
