解决当点击页面刷新时，vue的store数据丢失问题

Posted 2023-01-16 是Cc哈

一、问题描述
我在store中存储了item对象，但当我点击页面的刷新按钮时，item的值变成了undefined。store中的数据丢失。

二、原因
刷新页面时，vue实例重新加载，从而，store也被重置了。store是用来存储组件状态的，而不是用来做本地数据存储的。所以，对于不希望页面刷新之后被重置的数据，使用本地存储来进行存储。

三、解决思路
由于产生原因是由于刷新后store被重置导致数据丢失，那么我们可以通过监听刷新，在刷新之前将store的数据存储起来，在刷新时再读取到store中。

四、解决办法
刷新页面时vue实例重新加载，store就会被重置，可以把定义刷新前把store存入本地localStorage、sessionStorage、cookie中，localStorage是永久储存，重新打开页面时会读取上一次打开的页面数据，sessionStorage是储存到关闭为止，cookie不适合存大量数据。根据我的解决思路，最合适的是sessionStorage。
beforeunload在页面刷新时触发，可以监听这个方法，让页面在刷新前存store到sessionStorage中。
当然，在页面刷新时还要读取sessionStorage中的数据到store中，读取和储存都写在app.vue中。

export default 
  name: 'app',
  created () 
    // 在页面加载时读取sessionStorage
    if (sessionStorage.getItem('store')) 
      this.$store.replaceState(Object.assign(, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    
    // 在页面刷新时将store保存到sessionStorage里
    window.addEventListener('beforeunload', () => 
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    )