100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 浏览器刷新页面导致vuex数据丢失问题如何解决?

浏览器刷新页面导致vuex数据丢失问题如何解决?

时间:2020-06-09 10:42:46

相关推荐

浏览器刷新页面导致vuex数据丢失问题如何解决?

Vuex刷新页面数据丢失

vuex的数据是存储在内存中的

当刷新浏览器时,会将内存释放清空数据,导致vuex中的数据丢失

此时可借助浏览器的本地存储

localStorage

sessionStorage

在App.vue中:

<template><div><router-view></router-view></div></template><script>export default {created(){//在页面加载时读取sessionStorage里的状态信息if(sessionStorage.getItem('storeState')){//replaceState,替换store的根状态this.$store.replaceState(Object.assign({},this.$store.state,JSON.parse(sessionStorage.getItem('storeState'))))}//在页面刷新时将vuex里的信息保存到sessionStorage里window.addEventListener('beforeunload',()=>{sessionStorage.setItem('storeState',JSON.stringify(this.$store.state))})}}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。