Pinia 实现表单动态字段增删的核心是利用响应式 state 的 Proxy 机制和模块化设计，推荐用数组存储字段对象（含 id、type、value 等），通过 actions 封装 addField、removeField、updateField 等操作，配合 getters 实现校验与状态派生，并注意解构时保持响应性。
Pinia 处理表单动态字段增删的全局状态管理，核心在于利用其响应式 state 的 Proxy 机制和模块化设计，让字段的添加、删除、修改、校验等操作既直观又可追踪。它不需要额外封装或手动触发更新，新增或删除字段天然具备响应式。
表单字段用数组或对象结构存储
推荐将动态字段统一存为数组（如 fields: []），每个字段是带 id、type、value、label 等属性的对象。这样便于遍历渲染、按需增删、批量校验。
- 用 ref 或 reactive 包裹整个字段数组，确保响应式生效
- 每个字段的 id 建议用 crypto.randomUUID() 或 nanoid 生成，避免重复和索引依赖
- 不建议直接用 state.fields[index] = {...} 修改——虽可行，但易出错；优先走 actions 封装逻辑
在 actions 中封装增删改逻辑
所有字段变更都通过 store 的 actions 方法执行，保持行为可预测、可调试、可复用。
-
addField：push 一个新字段对象到
state.fields -
removeField：用
state.fields = state.fields.filter(f => f.id !== id)删除（Proxy 支持数组 filter 后自动响应） -
updateField：通过 id 查找并浅合并字段属性，例如
const field = state.fields.find(f => f.id === id); if (field) Object.assign(field, updates) - moveField（可选）：用 splice 实现上下拖拽排序，同样完全响应式
支持字段级响应式计算与校验
借助 getters 和 computed 思维，可派生出校验结果、必填项数量、有效值列表等。
- 定义 validFields getter：返回所有
value !== '' && value != null的字段 - 定义 hasError getter：检查是否有字段
error?.length，用于禁用提交按钮 - 在 action 中调用校验函数后，直接赋值
field.error = '不能为空'，视图立刻更新
配合组件使用时注意解构安全
在 setup 或 script setup 中使用 store，不要直接解构 store.fields，否则会丢失响应性。
- ✅ 正确写法：
const store = useFormStore(); const fields = computed(() => store.fields) - ❌ 错误写法：
const { fields } = store（破坏响应式连接） - 表单控件绑定用
v-model="store.fields[i].value"即可，无需额外 .value
