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

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

目录+原因+解决方案+代码示例：在Vue项目中使用Vuex进行全局状态管理时，发现刷新网页后，存储在Vuex实例store中的数据会丢失。原因是store中的数据是保存在运行内存中的。刷新页面会导致内存被清空，因此数据也随之丢失。解决方法是在页面刷新时，从本地存储或其他持久化存储中重新获取数据，并将其同步到Vuex的store中。

目录

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

原因

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

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

解决思路

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

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