# vue.data页面级暂存实现

{% embed url="https://v.douyin.com/rRofpHY/" %}

{% embed url="https://www.bilibili.com/video/BV18T4y1z7zb/" %}

大家看这个demo哈

我想实现一个效果

就是把这个页面

所有的状态都暂存起来

包括这个页面下面可能还有一个

分页的表格

所以呢表格的数据啊

包括表格翻到第几页都能暂存起来

然后在刷新的时候呢

这个数据依然存在

所以呢用 keep-alive 就实现不了

那

我就想

能不能在这个暂存的点击事件里

用 this.$data 来获取到这个 vue（组件）

所有的data数据以后呢

把整个这个data数据都存起来

比如说我们存到 localStorage 哈

点 set attempt

然后起个名字就叫 stash

然后呢把它做一个四驱范对

把这个给他

这样就能存起来了

但我遇到一个什么问题呢

就是把它 data 读取出来没问题

问题是往里放有问题

就是这个 $data 属性

它是一个只读的

除非我们

遍历它里面子属性一个一个往里放

但这样就太麻烦了

那这个具体的报错呢我就不演示了哈

总之他就放不进去

后来呢我就发现

其实这个data()就是一个方法

在这return一个结果

所以我们可以直接在这去

比如说我们直接在这 localStorage 这点 get it

叫stash

然后呢把它放到一个变量 里

我们叫：stashStr

然后呢

把它转成json

就这样然后在这return的地方呢

我们稍微改一下

用Object.assign

原来的这个还放在这

只不过呢我们在这加一个

stash 的对象

好我们再来试一下哈

比如编辑一下随便都编辑一下

好然后暂存

然后刷新

大家看这就可以了

包括如果这个页面还有表格

翻页什么这都没问题
