Vue3 Pinia：直接修改state与$patch的性能对比及最佳实践

性能差异 #

• 单属性修改场景：直接修改state（比如this.count++）和使用$patch单属性更新的性能几乎无差异，两者都会触发一次状态变更通知，组件重渲染次数一致。
• 多属性/批量修改场景：$patch性能更优。直接多次修改不同state属性会触发多次状态变更通知，导致组件多次重渲染；而$patch（对象式或函数式）会将所有变更合并为一次通知，仅触发一次组件重渲染。

最佳实践 #

• 单属性简单更新：直接修改state更简洁直观，比如你示例中的directIncrement写法完全符合规范，没有问题。
• 多属性批量更新或依赖当前state的复杂更新：优先使用$patch，尤其是函数式写法（this.$patch(state => { ... })），它能避免对象式写法可能出现的引用问题，同时更清晰地表达“基于当前状态做变更”的逻辑。

修正你示例中的问题 #

你的patchIncrement方法存在两处错误：

1. 引用store.count会报错，action内部应通过this.count访问当前state
2. 对象式$patch的括号未闭合

修正后的写法可二选一：

// 对象式$patch（适合明确的属性赋值）
patchIncrement() {
  this.$patch({
    count: this.count + 1
  })
}

// 函数式$patch（适合依赖当前state的逻辑）
patchIncrement() {
  this.$patch(state => {
    state.count++
  })
}

总结 #

• 单个属性的简单递增/修改，直接用this.count++即可，性能和可读性都没问题。
• 一次性修改多个state属性，或修改逻辑依赖当前state的复杂计算时，用$patch（推荐函数式写法）更符合最佳实践，同时性能更优。

内容的提问来源于stack exchange，提问作者Hermann K. EHO