解决vue页面刷新,数据丢失的问题


Posted in Vue.js onNovember 24, 2020

在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,出现这个问题的原因是因为当用vuex做全局状态管理的时候,store中的数据是保存在运行内存中的,页面刷新时会重新加载vue实例,store中的数据就会被重新赋值,因此数据就丢失了,解决方式如下:

解决方法一:

最先想到的应该就是利用localStorage/sessionStorage将数据储存在外部,做一个持久化储存,下面是利用localStorage存储的具体方案:

方案一:由于state中的数据是响应式的,而数据又是通过mutation来进行修改,故在通过mutation修改state中数据的同时调用localStorage.setItem()方法来进行数据的存储。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
  orderList: [],
  menuList: []
 },
 mutations: {
  orderList(s, d) {
   s.orderList= d;
   window.localStorage.setItem("list",JSON.stringify(s.orderList))
  }, 
  menuList(s, d) {
   s.menuList = d;
   window.localStorage.setItem("list",JSON.stringify(s.menuList))
  },
 }
})

在页面加载的时候再通过localStorage.getItem()将数据取出放回到vuex,可在app.vue的created()周期函数中写如下代码:

if (window.localStorage.getItem("list") ) {
  this.$store.replaceState(Object.assign({}, 
  this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}

方案二:方案一能够顺利解决问题,但不断触发localStorage.setItem()方法对性能不是特别友好,而且一直将数据同步到localStorage中似乎就没必要再用vuex做状态管理,直接用localStorage即可,于是对以上解决方法进行了改进,通过监听beforeunload事件来进行数据的localStorage存储,beforeunload事件在页面刷新时进行触发,具体做法是在App.vue的created()周期函数中下如下代码:

if (window.localStorage.getItem("list") ) {
  this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
 } 

window.addEventListener("beforeunload",()=>{
  window.localStorage.setItem("list",JSON.stringify(this.$store.state))
 })

解决方法二(推荐):

这个方法是基于对computed计算属性的理解,在vue的官方文档中有这么一段话:

解决vue页面刷新,数据丢失的问题

由此得知计算属性的结果会被缓存,也就是说在有缓存的情况下,computed会优先使用缓存,于是也可以在state数据相对应的页面这样写:

computed:{
  orderList() {
    return this.$store.state.orderList
  }
}

以上就是解决vue页面刷新,数据丢失的问题的详细内容,更多关于vue页面刷新,数据丢失的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue实现广告栏上下滚动效果
Nov 26 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 Vue.js
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
一篇文章学会Vue中间件管道
Jun 20 Vue.js
vue实现可以快进后退的跑马灯组件
Apr 08 Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
Vue 的 v-model用法实例
Nov 23 #Vue.js
VUE+Element实现增删改查的示例源码
Nov 23 #Vue.js
Vue实现购物小球抛物线的方法实例
Nov 22 #Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 #Vue.js
详解vue 组件注册
Nov 20 #Vue.js
vue-drawer-layout实现手势滑出菜单栏
Nov 19 #Vue.js
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 #Vue.js
You might like
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
浅析php fwrite写入txt文件的时候用 \r\n不能换行的问题
2013/08/06 PHP
php实现的RSS生成类实例
2015/04/23 PHP
PHP正则表达式匹配替换与分割功能实例浅析
2017/02/04 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
js 函数的副作用分析
2011/08/23 Javascript
深入理解事件冒泡(Bubble)和事件捕捉(capture)
2016/05/28 Javascript
ReactNative-JS 调用原生方法实例代码
2016/10/08 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
vue实现图片滚动的示例代码(类似走马灯效果)
2018/03/03 Javascript
浅谈React高阶组件
2018/03/28 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
vue-cli项目配置多环境的详细操作过程
2018/10/30 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[52:07]完美世界DOTA2联赛PWL S3 LBZS vs access 第二场 12.10
2020/12/13 DOTA
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
用python找出那些被“标记”的照片
2017/04/20 Python
Python自定义一个异常类的方法
2019/06/27 Python
python GUI库图形界面开发之PyQt5布局控件QVBoxLayout详细使用方法与实例
2020/03/06 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
Python远程linux执行命令实现
2020/11/11 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
菲律宾购物网站:Lazada菲律宾
2018/04/05 全球购物
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
软件测试企业面试试卷
2016/07/13 面试题
个人找工作的自我评价
2013/10/17 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
设计师求职信模板
2014/05/06 职场文书
高一军训的心得体会
2014/09/01 职场文书
盘点2020年适合农村地区创业的项目
2019/10/16 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang
Redis Stream类型的使用详解
2021/11/11 Redis