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 24 Vue.js
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
详解Vue slot插槽
Nov 20 Vue.js
vue3获取当前路由地址
Feb 18 Vue.js
Vue+TypeScript中处理computed方式
Apr 02 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue css 相对路径导入问题级踩坑记录
Jun 05 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 str_pad 函数使用详解
2009/01/13 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
php中instanceof 与 is_a()区别分析
2015/03/03 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
javascript实现十秒钟后注册按钮可点击的方法
2015/05/13 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
JS实现留言板功能
2017/06/17 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
Bootstrap实现可折叠分组侧边导航菜单
2018/03/07 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
小程序input数据双向绑定实现方法
2019/10/17 Javascript
JavaScript变量基本使用方法实例分析
2019/11/15 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
element 动态合并表格的步骤
2020/12/31 Javascript
python直接访问私有属性的简单方法
2016/07/25 Python
python根据url地址下载小文件的实例
2018/12/18 Python
使用python打印十行杨辉三角过程详解
2019/07/10 Python
使用Django清空数据库并重新生成
2020/04/03 Python
html5中localStorage本地存储的简单使用
2017/06/16 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
安全生产责任书范本
2014/04/15 职场文书
销售顾问工作计划书
2014/09/15 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python
MySQL之select、distinct、limit的使用
2021/11/11 MySQL
解决MySQL添加新用户-ERROR 1045 (28000)的问题
2022/03/03 MySQL
阿里云k8s服务升级时502错误 springboot项目应用
2022/04/09 Servers