编辑与草稿

编辑表单与创建表单不同：数据已经存在，只需提交修改的部分，而丢失修改会让人很沮丧。

加载数据

初始值通常在表单创建之后才从服务端返回。把它们传给 reset —— 它们会成为 dirty 和 changes 的新基准：

const form = useForm(UpdateUser, { initial: { name: '', email: '', bio: '' } });

onMounted(async () => {
  const user = await api.get(`/users/${id}`);
  form.reset({ name: user.name, email: user.email, bio: user.bio ?? '' });
});

只提交修改的字段 —— PATCH

form.changes 只包含用户修改过的内容。配合 partial Schema，就可以直接用于 PATCH：

const submit = form.handleSubmit(async () => {
  await api.patch(`/users/${id}`, form.changes); // { bio: 'New bio' }
});

<button :disabled="!form.dirty || form.submitting">Save</button>
<span v-if="form.isDirty('email')">Email will be changed</span>

成功提交后，当前值被视为已保存：dirty 变为 false，changes 变为空。如果处理函数中调用了 setErrors（服务端拒绝了数据），修改仍视为未保存。

草稿与离开提醒

useDraft 保存输入内容并在刷新后恢复；useLeaveGuard 在关闭有未保存修改的标签页时发出提醒：

const form = useForm(Post, { initial: { title: '', body: '' } });
useDraft(form, `post-${id}`);
useLeaveGuard(form);

另请参阅

• partial
• useForm