vuex页面刷新数据丢失的解决办法

缺乏、安全感 2023-06-25 02:26 20阅读 0赞

# [vuex页面刷新数据丢失的解决办法][vuex] #

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

**原因：**

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

**解决思路：**

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

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中state数据的修改必须通过mutation方法进行修改，因此mutation修改state的同时需要修改sessionstorage,问题倒是可以解决但是感觉很麻烦，state中有很多数据，很多mutation修改state就要很多次sessionstorage进行修改，既然如此直接用sessionstorage解决不就行了，为何还要用vuex多此一举呢？  
vuex的数据在每次页面刷新时丢失，是否可以在页面刷新前再将数据存储到sessionstorage中呢，是可以的，[beforeunload][]事件可以在页面刷新前触发，但是在每个页面中监听beforeunload事件感觉也不太合适，那么最好的监听该事件的地方就在app.vue中。

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

**代码如下：**

export default \{  
name: 'App',  
created () \{  
//在页面加载时读取sessionStorage里的状态信息  
if (sessionStorage.getItem("store") ) \{  
this.$store.replaceState(Object.assign(\{\}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))  
\}

//在页面刷新时将vuex里的信息保存到sessionStorage里  
window.addEventListener("beforeunload",()=>\{  
sessionStorage.setItem("store",JSON.stringify(this.$store.state))  
\})  
\}  
\}

分类: [vue][]

## 另一篇： ##

在实际的vue项目中，当我们的应用遇到多个组件之间的共享问题时，通常会用到Vuex（一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化），解决组件之间同一状态的共享问题。

因子：

*  Vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。
 *  Vuex劣势：在刷新页面后，vuex会重新更新state，所以，存储的数据会丢失。

**言而总之：**

实际问题：在vue项目中，使用Vuex做状态管理时，调试页面时，刷新后state上的数据消失了，该如何解决？

解决思路：将state中的数据放在浏览器sessionStorage和localStorage

### 解决办法： ###

**存储到localStorage**

通过监听页面的刷新操作，即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息  
在App.vue中加入下面代码

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 </td> 
 <td> <code>created(){ </code> <code>&nbsp;</code><code>//在页面刷新时将vuex里的信息保存到localStorage里</code> <code>&nbsp;&nbsp;</code><code>window.addEventListener(</code><code>"beforeunload"</code><code>,()=&gt;{ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>localStorage.setItem(</code><code>"messageStore"</code><code>,JSON.stringify(</code><code>this</code><code>.$store.state))</code> <code>&nbsp;&nbsp;</code><code>})</code> <code>&nbsp;&nbsp;</code>&nbsp; <code>&nbsp;</code><code>//在页面加载时读取localStorage里的状态信息</code> <code>&nbsp;&nbsp;</code><code>localStorage.getItem(</code><code>"messageStore"</code><code>) &amp;&amp; </code><code>this</code><code>.$store.replaceState(Object.assign(</code><code>this</code><code>.$store.state,JSON.parse(localStorage.getItem(</code><code>"messageStore"</code><code>))));</code> <code>&nbsp;</code><code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

**或者使用vuex-persistedstate 插件**

安装插件：`npm install vuex-persistedstate --save`

配置：

在store的index.js中，手动引入插件并配置

[?][Link 2]

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 </td> 
 <td> <code>import createPersistedState from </code><code>"vuex-persistedstate"</code> <code>const store = </code><code>new</code> <code>Vuex.Store({ </code> <code>&nbsp;</code><code>// ...</code> <code>&nbsp;</code><code>plugins: [createPersistedState()]</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

该插件默认持久化所有state，当然也可以指定需要持久化的state：

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 </td> 
 <td> <code>import createPersistedState from </code><code>"vuex-persistedstate"</code> <code>const store = </code><code>new</code> <code>Vuex.Store({ </code> <code>&nbsp;</code><code>// ...</code> <code>&nbsp;</code><code>plugins: [createPersistedState({ </code> <code>&nbsp;&nbsp;</code><code>storage: window.sessionStorage,</code> <code>&nbsp;&nbsp;</code><code>reducer(data) { </code> <code>&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>{ </code> <code>&nbsp;&nbsp;&nbsp;</code><code>// 设置只储存state中的myData</code> <code>&nbsp;&nbsp;&nbsp;</code><code>myData: data.myData</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;</code><code>})]</code> </td> 
 </tr> 
 </tbody> 
</table>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

[vuex]: https://www.cnblogs.com/chenhuichao/p/11359097.html
[Link 1]: https://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies
[beforeunload]: https://www.w3cschool.cn/fetch_api/fetch_api-9vhu2oq0.html
[replaceState]: https://vuex.vuejs.org/zh/api/#replacestate
[vue]: https://www.cnblogs.com/chenhuichao/category/1176477.html
[Link 2]: https://www.jb51.net/article/160918.htm#