Vue 之 vuex 解决刷新页面 state 数据丢失的问题

Posted 2022-02-18 zhuangwei_8256

  vue项目在使用 vuex 时都会存在一个问题，那就是当浏览器刷新时会清除 vuex 缓存的 state 数据，而偶尔可能会碰到某种需求需要实现在刷新浏览器时不清除vuex缓存的数据，那么该如何实现呢？
  这个时候我们就需要利用到浏览器的会话缓存 sessionStorage 来实现，具体实现代码如下：

• 在 App.vue 中增加监听刷新事件：

export default 
    name: "App",
    mounted() 
        window.addEventListener("unload", this.savaState);
    ,
    methods: 
        savaState() 
            sessionStorage.setItem("state", JSON.stringify(this.$store.state));
        
    

• 然后在相应的 vuex 中的 state 属性中：

let stateStorage = sessionStorage.getItem("state");

const state = stateStorage ? JSON.parse(stateStorage) : 
    userInfo: 
        userName: ''
    

  
  

如有不足，望大家多多指点！ 谢谢！