vuex 页面刷新数据丢失问题及解决办法

原创已于 2023-02-21 23:34:52 修改 · 738 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

于 2023-02-09 23:39:53 首次发布

vue 专栏收录该内容

6 篇文章

订阅专栏

文章探讨了Vuex中数据在页面刷新后丢失的问题，提出了解决方案——利用浏览器缓存（如sessionStorage）保存state。在刷新前将state存储到sessionStorage，在刷新后重新加载时检查存储的数据，若请求失败则使用缓存中的数据恢复Vuex状态。

问题原因

由于vuex中store里的数据是保存再内存里的，页面刷新会重新加载vue实例，store里数据会重置；

解决思路

将数据保存在浏览器缓存里（cookie、sessionstorage、localstorage）
页面刷新时再次请求数据
- 监听浏览器的刷新时间，在刷新前把数据保存到sessionstorage，刷新后请求数据，请求到了用vuex，没有就用sessionstorage里的数据

解决办法

修改store文件下Index中state的定义

const store = new Vuex.Store({
    state:sessionStorage.getItem('state') ? JSON.parse(sessionStorage.getItem('state')): 
	  ...
    }
})

App.vue中添加

mounted() {
            window.addEventListener('unload', this.saveState) // 监听页面重载
        },
        methods: {
            saveState() {
                sessionStorage.setItem('state', JSON.stringify(this.$store.state))
            }
        }