vue项目表单自动保存（定时缓存）功能 + beforeRouteLeave钩子函数使用 |
您所在的位置：网站首页 › vue多步骤表单 › vue项目表单自动保存（定时缓存）功能 + beforeRouteLeave钩子函数使用 |
|
也是最近公司项目遇到的需求，和其它大佬实现方法些许不同，这边进行整理 方便自己方便大家哈哈 1、首先要写一个将数据缓存到本地的方法 setLocal() { //console.log("我set了一次") let localData =this.form.getFieldsValue() let questions = [] this.input.map(item => { if(item.question!==''||item.answer!=='') questions.push(item) }) localData.tips = questions localData.beginTime = localData.beginTime?localData.beginTime.format("YYYY-MM-DD"):null console.log(localData) let valuesStr = JSON.stringify(localData) window.localStorage.setItem('recordData',valuesStr) this.$message.success('保存成功！'); },这里有很多业务代码 参考价值不大 其实主要就是 window.localStorage.setItem(‘recordData’,valuesStr) 这行代码 注：localStorage只能set字符串格式的数据，所以别忘了先用JSON.stringify()转成字符串 稍后取数据再用JSON.parse()转回对象即可 2、页面加载mounted取数据 if(window.localStorage.getItem('recordData')) { let getLocal = JSON.parse(window.localStorage.getItem('recordData')) console.log(getLocal) this.$nextTick(() => { this.form.setFieldsValue(pick(getLocal,'beginTime','address','recorder','asker','joinIds','remark','nmgName','tele','leaveAddr','workCom','ageNum','gender','education','nmgIds')) this.form.setFieldsValue({beginTime:getLocal.beginTime?moment(getLocal.beginTime):null}) }); if(getLocal.tips.length this.input[index] = item }) }else { this.input = getLocal.tips let num = Number(getLocal.tips.length)-3 for (i = 0; i }) } } console.log(this.input) }主要代码：JSON.parse(window.localStorage.getItem(‘recordData’) 取出数据后，按照自己的情况，将数据填充至表单即可 （我这里使用的UI框架是vue ant design ） 3、开启定时器 再然后就是关键的 怎么定时自动保存呢？ 当然是要用到定时器啦，but单纯的使用setInterval会导致页面卡死，setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死，但是setTimeout是自带清除定时器的，因此此方法可以实现每隔一段时间执行一次方法的功能。以下方法在method里定义 created或者mounted里调用都可以 changeValue() { //console.log("我是定时器 ") this.timer = window.setInterval(() => { setTimeout(this.setLocal(), 0) }, 10000) }4、关闭定时器 由于我的项目是一个管理系统，所以有时只是切换路由，并未将表单页面销毁，所以这里关闭定时器的操作我就没放在beforeDestroy钩子里，而是一个离开当前路由之前的钩子函数-- beforeRouteLeave代码如下 beforeRouteLeave(to, form, next) { if (this.timer) { // 如果定时器还在运行 或者直接关闭，不用判断 clearInterval(this.timer) // 关闭 } next() }到这里就基本实现了我想要的效果了，暂时还没发现“副作用” 哈哈哈坐等测试，如有相关bug，这边再更~ 等下 这边补充下关于路由切换的另一个钩子 切换进入当前路由之前的钩子函数 beforeRouteEnter beforeRouteEnter(to, form, next) { //离开该路由之前想进行的操作 next() }ok 溜ヾ(￣▽￣)ByeBye |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |