解决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中使用mockjs代码实例
Nov 25 Vue.js
Vue项目如何引入bootstrap、elementUI、echarts
Nov 26 Vue.js
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
详解Vue的异步更新实现原理
Dec 22 Vue.js
SpringBoot+Vue 前后端合并部署的配置方法
Dec 30 Vue.js
Vue SPA 首屏优化方案
Feb 26 Vue.js
vue实现可移动的悬浮按钮
Mar 04 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue组件vue-esign实现电子签名
Apr 21 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
php数据结构与算法(PHP描述) 查找与二分法查找
2012/06/21 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
laravel 解决ajax异步提交数据,并还回填充表格的问题
2019/10/15 PHP
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
2013/04/19 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
jQuery动态添加
2016/04/07 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
浅谈jquery页面初始化的4种方式
2016/11/27 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
JavaScript方法_动力节点Java学院整理
2017/06/28 Javascript
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
小程序点餐界面添加购物车左右摆动动画
2020/09/23 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
在Python中操作字典之clear()方法的使用
2015/05/21 Python
解读Python编程中的命名空间与作用域
2015/10/16 Python
python按时间排序目录下的文件实现方法
2018/10/17 Python
HTML5+CSS3:3D展示商品信息示例
2017/01/03 HTML / CSS
土木工程专业个人求职信
2013/12/30 职场文书
大学生职业规划论文
2014/01/11 职场文书
偷看我的初中毕业鉴定
2014/01/29 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
原料仓管员岗位职责
2014/04/12 职场文书
环境日宣传活动总结
2014/07/09 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
党建工作目标管理责任书
2015/01/29 职场文书
2015年房产经纪人工作总结
2015/05/15 职场文书
校运会新闻稿
2015/07/17 职场文书
初中政教处工作总结
2015/08/12 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
2019安全宣传标语大全
2019/08/14 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js