4.解决页面刷新vuex的state清空问题

解决页面刷新vuex的state清空问题

问题：store中state数据刷新页面后清空

解决：

监听页面是否刷新，如果页面刷新了，将state对象存入到sessionStorage/localStorage中。页面打开之后，判断sessionStorage/localStorage中是否存在state对象，如果存在，则说明页面是被刷新过的，将sessionStorage/localStorage中存的数据取出来给vuex中的state赋值。如果不存在，说明是第一次打开，则取vuex中定义的state初始值。

一、更改store文件下state的定义，加入判断sessionStorage是否有state，存在，则加载sessionStorage取出的数据

const store =  new Vuex.Store({
  state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')) :{
    routes:[],
    sessions:{},//聊天记录
    users:[],//用户列表
    currentUser:null,//当前登录用户
    currentSession:null,//当前选中的用户
    filterKey:'',
    stomp:null,
    isDot:{},//两用户之间是否有未读信息
  },
    //省略
})

二、ChatRoom.vue中添加刷新前的事件监听方法

beforeunload事件会在页面刷新前触发，方法实现就是在刷新前保存state到sessionStorage

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

拓展——localStorage和SessionStorge：

localStorage

localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

var storage = null;  
    if(window.localStorage){              //判断浏览器是否支持localStorage  
       storage = window.localStorage;       
       storage.setItem("name", "Rick");    //调用setItem方法，存储数据  
       alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick  
       storage.removeItem("name");     //调用removeItem方法，移除数据  
       alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null

sessionStorage sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。

参考：

https://blog.csdn.net/guzhao593/article/details/81435342?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

https://blog.csdn.net/qq_26715417/article/details/102343419