vue数据本地储存

就这一个页面+连数据我都写了能有一周了,可累死老娘了,啊啊啊啊
vue数据本地储存_第1张图片
vue数据本地储存_第2张图片
vue数据本地储存_第3张图片

就是这样一个页面
1.要实现的就是点击新增提交之后,数据上传到数据库,后台返回数据本地储存,显示在页面
2.填写表单之后,点击新增返回主页面填写的表单保留数据

解决思路
1.要实现的就是点击新增提交之后,数据上传到数据库,后台返回数据本地储存,显示在页面
要实现这个问题需要在新增页面中点击提交走后台的接口,后台接口给我返回提交数据(第一次见这种返回,后台大哥想的解决方案)。之后我将数据使用
localStorage.setItem(变量名,JSON.stringify(保存的变量));来保存数据。

注意:localStorage.setItem保存字符串的时候可以第二个参数直接传入保存数据localStorage.setItem(变量名,保存的变量),但是在保存数组和对象的时候需要使用JSON.stringify。
vue数据本地储存_第4张图片
1.是判断进入查看页面还是修改页面,状态由上一个页面带入
2.调用接口,反显查看/编辑信息
3.先获取存储的数据,判断存储数据是否存在,否则报错。
4.将修改的数据存放进obj中,如果存在就将obj压入数组中,重新存储数组,更新数据。如果不存在,就设置数组为空,压入obj添加数据

但是此时我又遇到了一个问题:最开始想的是我需要把数据保存到本地,然后在大页面显示,但是我的三个table(财务信息,科技能力,知识产权)需要有查看、编辑、删除。查看、编辑都需要反显信息,我当时的想法是把我保存的信息反显到查看、编辑中。但是localStorage有一个问题就是附件信息没法保存,数据缺失。所以我陷入了绝望,好在后台写了查询语句,我直接调用就ok了,这个问题over。

2填写表单之后,点击新增返回主页面填写的表单保留数据
新增数据搞定后,就开始弄大页面数据保存本的,以便于从新增页面返回之后依旧保存填写过的数据。我开始想的是在data设置一个空的对象form,每个input加上一个改变值的点击事件,将点击事件改变的值存到form中,但是我发现,如果数据填好已经保存,但是当我填好最后一个input的时候,从新增页面跳转回来的时候只有最新的input有数值。这是因为只更新了最新input框的数值,我天真了,我以为是像对象一个一个保存的呢。

后来我发现我的脑子瓦特了,我直接把ruleform的数值放进去存储不就好了嘛。删除数据也需要删除中间数组数值,再重新存储。
vue数据本地储存_第5张图片
无论点击哪个新增按钮都存储表单信息
vue数据本地储存_第6张图片
初始化页面的时候获取表单,先判断这个对象是否存在
vue数据本地储存_第7张图片将页面中table删除的数据移除,重新赋值存储信息。

接下来我发现在我调用这个大页面的需要传十五个参数的这个接口竟然不好使。一开始我以为是参数多传或少传,后来发现是因为用localStorage存储文件没有完整的存入,所以附件没传上。于是我不得不用vuex。但是这个原来项目的框架vuex有点迷,一开始我添加了方法怎么都获取不到,后来我发现这个框架自己建了一个getters.js文件对state状态进行抛出。
vue数据本地储存_第8张图片
vue数据本地储存_第9张图片
getter.js对store的moudles进行抛出,让我们可以获得这个页面,于是我就写了fileInfo.js文件
vue数据本地储存_第10张图片
接下来就是存储文件和提取文件了
vue数据本地储存_第11张图片
存储文件dispatch(action的路径,存储的变量)
vue数据本地储存_第12张图片
初始化页面获取文件数据,fileList是显示在页面上的,如果有存储内容则赋值,没有置空。
最后就是提交和重置之后都要清空这些存储,之后就over了。

vuex还是不会,有空得琢磨一下子。

你可能感兴趣的:(vue)