Inertia.js中表单isDirty状态失效问题解析

问题现象

在使用Inertia.js的Vue3版本时，开发者发现当表单数据中包含数组类型字段时，通过push方法修改数组内容后，表单的isDirty状态未能正确更新为true。具体表现为：

1. 初始化一个包含空数组的表单
2. 调用defaults()方法设置默认值
3. 向数组push新元素
4. 检查isDirty状态仍为false

技术背景

isDirty是表单对象的一个重要属性，用于标识表单数据是否已被修改。在Inertia.js中，这个属性通过比较当前数据与默认值的差异来确定表单是否"脏"（即被修改过）。

问题根源

经过分析，这个问题主要源于Vue3的响应式系统与Inertia.js表单处理的交互方式：

1. Vue3的Proxy机制：当调用defaults()方法时，Inertia.js会将当前表单数据转换为Vue3的Proxy对象作为默认值存储
2. 数组操作的局限性：直接对数组进行push操作时，Vue3的响应式系统可能无法正确触发依赖更新
3. 默认值处理：当不带参数调用defaults()方法时，会移除表单数据对象自身的Proxy，导致响应性丢失

解决方案

针对这个问题，开发者可以采用以下几种解决方案：

方案一：显式设置默认值

form.defaults('foo', [...form.foo])

这种方式明确指定了要设置为默认值的字段，保持了响应性。

方案二：使用setData方法更新数组

form.setData({
  foo: [...form.foo, newItem]
})

这种方法通过创建新数组来确保触发响应式更新。

方案三：React版本的替代方案

对于React用户，虽然isDirty更新会有延迟，但最终会正确反映状态变化：

useEffect(() => {
  form.setDefaults()
  form.setData({ foo: [...form.data.foo, 1] })
}, [])

useEffect(() => {
  console.log(form.isDirty)
}, [form.isDirty])

最佳实践建议

1. 当表单中包含数组类型字段时，建议使用显式的defaults设置
2. 修改数组内容时，优先考虑使用不可变方式（创建新数组）而非直接修改
3. 对于复杂数据结构，考虑使用深层比较或自定义脏检查逻辑
4. 在Vue3环境中，注意Proxy对象对响应式系统的影响

总结

Inertia.js的表单系统在大多数情况下工作良好，但在处理数组类型字段时需要特别注意。理解框架底层如何跟踪数据变化对于解决这类问题至关重要。通过采用正确的数据更新模式和默认值设置方法，可以确保isDirty状态始终准确反映表单的实际修改状态。