四步的入驻表单,用户填完前两页按了 F5,回到第一步,姓名和营业执照号全空,只能从头再来。客服一天收到七八个这样的反馈。日志里能对上时间点,这种反而好排。
每一步的字段只存在当前组件的状态里,切换步骤时组件卸载,数据跟着丢。刷新更彻底,内存里的东西一件不剩,草稿也没有落到本地。这一点先确认清楚,后面就不用反复试。
const KEY = 'apply-draft';
watch(form, v => sessionStorage.setItem(KEY, JSON.stringify({ step, ...v })), { deep: true });
const draft = JSON.parse(sessionStorage.getItem(KEY) || 'null');
「多步表单状态」改完先别急着全量,挑一台机器放半天,真有问题这段时间就能看出来。线上出问题先对时间点,跟发布、备份、任务执行的时刻排一排,能省掉一半功夫。
日志级别临时调高可以,记得改回去,长期开着既占磁盘又掩盖真问题。
处理上按这个顺序:每步校验通过就把整份数据写进 sessionStorage,键名带上表单 id;进入页面先读草稿并回填,再决定跳到第几步;提交成功后才清掉草稿,失败时保留并提示已保存。
结果对不对很好判断,填到第三步刷新,页面回到第三步,前两页字段原样还在。
