浏览器刷新页面导致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>

浏览器刷新页面导致vuex数据丢失问题如何解决？相关推荐

浏览器刷新页面后回到顶部_当你在浏览器中，忘记了曾经的登录密码怎么办......
当你在浏览器中,忘记了曾经的登录密码怎么办... 前言你还在为使用浏览器的时候,忘记密码而烦恼吗?今天要分享的不为人知的小技巧,利用前端技术原理来帮助你找回原密码. 在我们使用各种网站登录时,总会勾 ...
java浏览器刷新页面_使用js刷新浏览器页面
reload 方法,该方法强迫浏览器刷新当前页面. 语法:location.reload([bForceGet]) ...
浏览器刷新页面后回到顶部_JavaScript仿知乎回到顶部功能
一般的网站都有个回到顶部,回到顶部又有多种方法可以实现, 方法1: 在css中添加 html {scroll-behavior: smooth; } 然后在回到顶部按钮上加一个a标签,herf属性写顶 ...
ajax用get刷新页面元素在IE下无效解决~~
总结一下解决办法: 在IE下用Ajax请求某一页面,通常会因为缓存的原因而返回上一次的结果,造成混乱,[即get方式时,获取数据,因发送参数和地址都一致,故IE浏览器会从缓存中取,而不会去请求服务器 ...
vuex刷新页面数据丢失怎么解决_vuex状态机浅谈
我最近项目上在使用vuex的过程中,遇到下面两个问题 F5刷新后,vuex中状态丢失 v-model需要与vuex结合针对这两个问题,我的解决办法是问题1:F5刷新后,vuex中状态丢失解决办法 ...
快速刷新页面ajax出现404,react使用BrowserRouter打包后，刷新页面出现404
nginx nginx.conf server { listen 80 default_server; server_name /var/www/example.com; root /var/www/ ...
VUE倒计时刷新页面不影响
前端强制性JS倒计时关闭浏览器(刷新页面也存在)也会存在的倒计时* VUE 倒计时刷新页面也存在 (持续更新) 不多BB 直接上代码活用 localStorage 机制 (VUE+webpack版 ...
刷新率过高导致显示器黑屏的解决办法
液晶显示器刷新率一般在60,可是有些软件会自动设置刷新率导致显示器黑屏. 解决方法: 1.如果黑屏的电脑安装了远程连接工具,如pcAnywhere等,可以远程调整: 2.重启至安全模式,删除显卡驱动 ...
解决浏览器刷新vuex数据丢失问题
vuex的主要作用是组件之间的通信以及对数据进行中心化管理. 但是由于vuex中的数据是存在运行内存中的,所以当我们刷新页面的时候会导致store中的数据清空. 怎么解决这个问题呢? 我们可以使用传统 ...
vuex页面数据丢失_使用vuex解决刷新页面state数据消失的问题记录
在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题. 因子: Vuex ...

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

Vuex刷新页面数据丢失

浏览器刷新页面导致vuex数据丢失问题如何解决？相关推荐

最新文章

热门文章