Vuex 刷新页面后数据就消失了，怎么保存数据持久化？

Posted 2023-04-04

参考技术A 1 .如果想让某些数据页面刷新之后不消失，那就可以结合本地存储做到数据持久化
2 .比如之前的搜索记录，还有一些需要依赖的数据。比如本次活动的代号存下来，让我在一段时间内，根据这个编号来确定相关代号代表的一批数据可以缓存在本地，一遍在下一次请求的时候快速返回
3 .实现原理：在mutations定义的方法里对vuex的状态操作的同时对存储也做相应的操作
4 .插件vue-savedata，vuex-persistedstate
5 .实际实现:监听浏览器的刷新，刷新之前把vuex存在本地，在路由拦截处获取本地储存，放进vuex并删除本地存储，可以自由控制存localstorage和sessionStorage，完全避免插件来消耗性能。
6 .不同页面之间的数据传值，vuex适合组件间传值。
7 .有的问题研究一分钟和一个小时，是会发现不同的问题。

1 .vuex存储在内存。localstorage则以文件的方式存储在本地
2 .应用场景：vuex用于组件之间的传值，localstorage则用于不同页面之间的传值
3 .永久性：当刷新页面时vuex存储的值会丢失。localStorage不会删除
4 .localstorage:只能进行简单的数据读写，对不同组件之间读取数据并做数据转化时，需要对每个读写操作都写一遍代码,重点是存放
5 .vuex是状态管理，重点是管理数据，一个是数据容器，一个是数据管理器。

下列选项（默认保存store中的每个数据到本地 ）

可以为您的特定需求配置插件: (参数都是可选的：有默认值)

1.store/index.js

Vuex刷新时数据会消失，那如何解决？为什么还要使用Vuex

在vue项目中用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失。

原因：

因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值初始化

 

解决思路：

将state的数据保存在localstorage、sessionstorage或cookie中，这样即可保证页面刷新数据不丢失且易于读取。

1. localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
2. sessionStorage:sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
3. cookie:cookie生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取。

由于vue是单页面应用，操作都是在一个页面跳转路由，因此sessionStorage较为合适,原因如下：

1. sessionStorage可以保证打开页面时sessionStorage的数据为空；
2. 每次打开页面localStorage存储着上一次打开页面的数据，因此需要清空之前的数据。

vuex的数据在每次页面刷新时丢失，是否可以在页面刷新前再将数据存储到sessionstorage中呢，是可以的，beforeunload事件可以在页面刷新前触发，但是在每个页面中监听beforeunload事件感觉也不太合适，那么最好的监听该事件的地方就在app.vue中。

1. 在app.vue的created方法中读取sessionstorage中的数据存储在store中，此时用vuex.store的replaceState方法，替换store的根状态
2. 在beforeunload方法中将store.state存储到sessionstorage中。

 

vuex中state数据的修改必须通过mutation方法进行修改，因此mutation修改state的同时需要修改sessionstorage,问题倒是可以解决但是感觉很麻烦，state中有很多数据，很多mutation修改state就要很多次sessionstorage进行修改，既然如此直接用sessionstorage解决不就行了，为何还要用vuex多此一举呢？

　　vuex可以实现数据响应，而sessionstorage是不可以的，我们使用vuex 的主要目的是为了各个组件之间的传参，通过数据改变视图。而sessionstorage是做不到这一点的。