vuex页面刷新导致数据丢失的解决方案


Posted in Vue.js onDecember 10, 2020

解决vuex页面刷新导致数据丢失问题

vuex数据是存在内存当中,当页面刷新之后vuex数据自然会丢失。我们有两种方法解决该问题:
1.使用vuex-along
2.使用localStorage或者sessionStroage

1.使用vuex-along

vuex-along的实质也是将vuex中的数据存放到localStorage或者sessionStroage中,只不过这个存取过程这个组件会帮我们完成,我们只需要用vuex的读取数据方式操作就可以了,简单了解一下vuex-along的使用方法。

安装vuex-along:

npm install vuex-along --save

配置vuex-along: 在store/index.js 中最后添加以下代码:

import VueXAlong from 'vuex-along' //导入插件
export default new Vuex.Store({
  //modules: {
    //controler //模块化vuex
  //},
  plugins: [VueXAlong({
    name: 'store',   //存放在localStroage或者sessionStroage 中的名字
    local: false,   //是否存放在local中 false 不存放 如果存放按照下面session的配置
    session: { list: [], isFilter: true } //如果值不为false 那么可以传递对象 其中 当isFilter设置为true时, list 数组中的值就会被过滤调,这些值不会存放在seesion或者local中
  })]
});

2.使用localStorage或者sessionStroage

created() {
  //在页面加载时读取sessionStorage里的状态信息
  if (sessionStorage.getItem("store")) {
   this.$store.replaceState(
    Object.assign(
     {},
     this.$store.state,
     JSON.parse(sessionStorage.getItem("store"))
    )
   );
  }
  //在页面刷新时将vuex里的信息保存到sessionStorage里
  window.addEventListener("beforeunload", () => {
   sessionStorage.setItem("store", JSON.stringify(this.$store.state));
  });
},

上面两种方法都可以解决vuex页面刷新导致数据丢失问题。按照上面的方法配置之后就可以正常使用vuex了,页面刷新数据也不会丢失了。

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

Vue.js 相关文章推荐
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
如何使用RoughViz可视化Vue.js中的草绘图表
Jan 30 Vue.js
vue使用节流函数的踩坑实例指南
May 20 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue修饰符.capture和.self的区别
Apr 22 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
详解vue-cli项目在IE浏览器打开报错解决方法
Dec 10 #Vue.js
Vue+element-ui添加自定义右键菜单的方法示例
Dec 08 #Vue.js
vue添加自定义右键菜单的完整实例
Dec 08 #Vue.js
vue中如何自定义右键菜单详解
Dec 08 #Vue.js
基于vue与element实现创建试卷相关功能(实例代码)
Dec 07 #Vue.js
vue祖孙组件之间的数据传递案例
Dec 07 #Vue.js
在vue中动态修改css其中一个属性值操作
Dec 07 #Vue.js
You might like
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP使用array_merge重新排列数组下标的方法
2015/07/22 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
jQuery的学习步骤
2011/02/23 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
node.js 模块和其下载资源的镜像设置的方法
2018/09/06 Javascript
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
javascript实现文字跑马灯效果
2020/06/18 Javascript
Vue+penlayers实现多边形绘制及展示
2020/12/24 Vue.js
[56:46]Liquid vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
python基础while循环及if判断的实例讲解
2017/08/25 Python
python3.6使用urllib完成下载的实例
2018/12/19 Python
完美解决pycharm导入自己写的py文件爆红问题
2020/02/12 Python
python实现批量修改文件名
2020/03/23 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
python help函数实例用法
2020/12/06 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
印度民族服装购物网站:BIBA
2019/08/05 全球购物
酒店总经理职务说明书
2014/02/26 职场文书
英语感谢信范文
2015/01/20 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技