vuex 页面刷新数据丢失 vuex持久化保存数据

爱喝冰可乐

已于 2022-09-27 16:50:10 修改

阅读量160

点赞数

文章标签： vue

于 2020-09-30 13:49:21 首次发布

本文链接：https://blog.csdn.net/u013361179/article/details/108883990

版权

本文介绍了如何利用sessionStorage在页面刷新前保存Vuex状态，确保数据在页面重新加载时依然可用。通过监听beforeunload事件，将状态序列化并存储，加载时再从sessionStorage恢复。

摘要由CSDN通过智能技术生成

sessionStorage结合vuex，保证页面刷新store里的数据仍然存在

// 在刷新前将vuex里的数据保存在sessionStorage里
window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('store', JSON.stringify(this.$store.state));
})

// 页面加载时读取sessionStorage里的状态
if (sessionStorage.getItem('store')) {
    this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
}