如何彻底解决Vue页面刷新导致Vuex数据丢失的问题？

本文共计598个文字，预计阅读时间需要3分钟。

目录 + 原因 + 解决思路 + 代码示例在Vue项目中使用Vuex进行全局状态管理，发现刷新网页后Vuex实例中的数据会丢失。原因是Vuex中的数据是保存在运行内存中的，页面刷新会导致内存中的数据被清除。

目录

• 原因
• 解决思路
• 代码如下

原因

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

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

解决思路

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

• localStorage: localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
• sessionStorage:sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。