刷新网页致vuex实例store中数据丢失问题解决方案

1. 产生原因

JavaScript代码是运行在内存中的，代码运行时的所有变量，函数，也都是保存在内存中的。刷新页面，之前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想储存就必须储存在外部，例如：localStorage,sessionStorage,indexDB等。这些是浏览器提供的API,让你可以将数据存储在硬盘上，做持久化储存。具体选择哪一个就根据你实际的需求来决定。

2. 解决思路

一种是state里的数据全部是通过请求来触发action或mutation来改变
一种是将state里的数据保存一份到本地存储中

很显然，第一种方案基本不可行，除非项目很小或者vuex存储的数据很少。而第二种可以保证刷新页面数据不丢失且易于读取。

3. 解决过程

1.首先得选择合适的客户端存储

localStorage是永久存储在本地，除非你主动去删除;

sessionStorage是存储到当前页面关闭为止;

cookie则根据你设置的有效时间来存储，但缺点是不能储存大数据且在每次接口请求时携带在请求头里。

我选择的是sessionStorage,选择的原因vue是单页面应用，操作都是在一个页面跳转路由，另一个原因是sessionStorage可以保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。

2.然后是怎么用sessionStorage来保存state里的数据。

第一种方案

扫描二维码关注公众号，回复： 13125142 查看本文章

由于state里的数据是响应式，所以sessionStorage存储也要跟随变化。又由于vuex规定所有state里数据必须通过mutation方法来修改，所以第一种方案就是mutation修改state的同时修改sessionStorage对应存储的属性

第二种方案

第一种方案确实可以解决问题，但这种方法很明显让人觉得怪异，都这样了，那不如直接用sessionStorage来做状态管理。

那怎么才能不用每次修改state时同时也要修改sessionStorage呢？这时我们可以换一个思路，因为我们是只有在刷新页面时才会丢失state里的数据，那有没有办法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面?

当然有，beforeunload这个事件在页面刷新时先触发的。那这个事件应该在哪里触发呢？我们总不能每个页面都监听这个事件，所以我选择放在app.vue这个入口组件中，这样就可以保证每次刷新页面都可以触发。

具体的代码如下：

export default {
    
    
  name: 'App',
  created() {
    
    
  
    // 获取本地存储的vuex信息
    const vuexData = sessionStorage.getItem('vuexDataStore')

    // 如果本地存有vuex信息，则载入vuex中
    if (vuexData) this.$store.replaceState({
    
     ...this.$store.state, ...JSON.parse(vuexData) })

    // 监听页面卸载，存储vuex信息
    window.addEventListener('beforeunload', () => {
    
    
      sessionStorage.setItem('vuexDataStore', JSON.stringify(this.$store.state))
    })
  },
}