vue3+pinia 实现缓存未提交的表单数据,下次进来可以继续编辑

vue3+pinia 实现缓存未提交的表单数据,下次进来可以继续编辑


随着vue3的普及vue3的状态管理工具也进行了升级pinia 比vueX更加适配vue3下面是我用vue3+pinia 实现的效果 vue3+pinia 实现缓存未提交的表单数据,下次进来可以继续编辑_第1张图片通常情况下用户可能在表单页面填了很多信息但是没有保存就退出来了,如果不记录用户填写信息的话 如果填写的内容较多,用户还需要重新填写,这样用户体验就不好了,下面是这个功能实现的具体代码

在这里插入图片描述pinia 用法和vuex大致相同 这里就不再赘述基本操作
在这里插入图片描述
在这里插入图片描述
在页面中引入你定义好的模块然后进行赋值

vue3+pinia 实现缓存未提交的表单数据,下次进来可以继续编辑_第2张图片然后在点击新增按钮时判断 state.formData state.formData.FGUID是否存在,存在就说明 之前编辑过 可以直接跳转表单,这里注意跳转表单后表单的值也是pinia存储的,这样才能保证点击继续的时候显示上次未提交的内容 如果不存在就说明没有点击过,直接新创建一个formData formData 的属性就是你表单提交的字段
在这里插入图片描述进入详情页也是一样先去列表存储的内容 这样如果有值的话 就会显示上次未提交的内容了
下面上全部代码
列表