pinia 适合分布式表单校验结果的全局状态汇总,通过 state 分模块存储校验状态、getters 聚合计算有效性、actions 统一更新,并配合自定义 hook 实现子组件校验结果自动上报。

Pinia 本身不直接处理表单校验逻辑,但它非常适合做「分布式表单校验结果的全局状态汇总」——关键在于把各子表单的校验状态(如是否有效、错误信息)统一收集到一个 Store 中,并提供聚合计算和响应式更新能力。
用 state 管理各字段/子表单的校验状态
每个子表单或字段可向同一个 Store 注册自己的校验结果。推荐用对象结构按 key 区分,例如:
- 用户信息部分:`validation.user = { name: true, email: '邮箱格式不正确' }`
- 地址部分:`validation.address = { province: true, detail: false }`
- 协议勾选:`validation.terms = false`
这样设计便于组件按需读取局部状态,也方便后续汇总。
用 getters 实现全局有效性判断
在 Store 中定义计算属性,自动聚合所有子项状态:
- `isValid: (state) => Object.values(state.validation).every(v => v === true)`(严格全通过)
- `hasError: (state) => Object.values(state.validation).some(v => v === false || typeof v === 'string')`
- `errorList: (state) => Object.entries(state.validation).flatMap(([k, v]) => typeof v === 'string' ? [{ field: k, message: v }] : [])`
这些 getter 是响应式的,任意子项变化都会触发重新计算,组件可直接绑定 `store.isValid` 控制提交按钮禁用状态。
用 actions 统一接收和更新校验结果
避免各组件直接修改 state,而是通过 action 封装更新逻辑,保证行为可追踪、可扩展:
- `setFieldValidation(field: string, result: boolean | string)`:更新单个字段
- `setSectionValidation(section: string, payload: Record
)`:批量更新某模块 - `resetValidation()`:清空全部校验状态(适合表单重置)
例如子组件调用:store.setFieldValidation('email', '邮箱已被注册'),Store 内部自动归并,getter 即时响应。
配合组合式 API 做轻量级校验桥接
在子组件中,可用自定义 hook 把校验结果“上报”到 Pinia:
- 封装
useFormValidation(sectionKey),内部自动关联 store 的 actions - 校验函数执行后,直接调用
store.setSectionValidation(sectionKey, result) - 无需手动维护 props / emit / event bus,也不依赖父组件透传
这种方式让校验逻辑分布于各子组件,而汇总与消费集中在 Store,职责清晰,调试直观。











