解决vuex保存的数据刷新页面时清空

关于页面刷新导致vuex（store）里面的数据消失问题，解决思路：

通过监听页面刷新或者关闭来将 vuex 里面的数据保存到 sessionStorage 里，在页面加载时读取 sessionStorage 里的状态信息，更新 vuex 的数据

【方法一】

参考文章： vuex中store保存的数据，刷新页面会清空

主要解决代码：

1、更改store文件下index文件state的定义

const store = new Vuex.Store({
    state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): {
        //id
        skillId:'',
        //技能状态
        checkStatus:''
    }
})

 

2、在App.vue中添加

　　　　　mounted() {
            window.addEventListener('unload', this.saveState)
        },
        methods: {
            saveState() {
                sessionStorage.setItem('state', JSON.stringify(this.$store.state))
            }
        }

 

【方法二】

 参考文章：vue单页面应用刷新网页后vuex的state数据丢失的解决方案

主要解决代码：

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))
    })
  }
}

 !!!【注意】

beforeunload 事件在 ios 上不兼容，刷新页面时无法执行

解决方案： 使用 pagehide 代替 beforeunload

即：

window.addEventListener('pagehide', () => {
     sessionStorage.setItem('store', JSON.stringify(this.$store.state))
})

 参考文章： 解决移动端无法监听页面刷新或关闭（beforeunload无效）问题