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如何实现验证码输入交互
Dec 07 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
基于vue的video播放器的实现示例
Feb 19 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 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操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
JQuery获取文本框中字符长度的代码
2011/09/29 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
2013/12/12 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
JS获取及设置TextArea或input文本框选择文本位置的方法
2015/03/24 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
基于JQuery实现图片上传预览与删除操作
2016/05/24 Javascript
两种JavaScript的AES加密方式(可与Java相互加解密)
2016/08/02 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
JS简单实现滑动加载数据的方法示例
2017/10/18 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
vue使用element-ui实现表单验证
2020/12/13 Vue.js
Python中的集合类型知识讲解
2015/08/19 Python
2019 Python最新面试题及答案16道题
2019/04/11 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
Python3实现发送邮件和发送短信验证码功能
2020/01/07 Python
Python验证码截取识别代码实例
2020/05/16 Python
django中related_name的用法说明
2020/05/20 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
总经理司机职责
2014/02/02 职场文书
初级会计求职信范文
2014/02/15 职场文书
11月升旗仪式讲话稿
2014/02/15 职场文书
签约仪式主持词
2014/03/19 职场文书
《她是我的朋友》教学反思
2014/04/26 职场文书
四风之害观后感
2015/06/09 职场文书
三八妇女节主持词
2015/07/04 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers