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 相关文章推荐
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
Vue实现简单购物车功能
Dec 13 Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
详解vite+ts快速搭建vue3项目以及介绍相关特性
Feb 25 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
vue实现倒计时功能
Mar 24 Vue.js
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
Vue OpenLayer测距功能的实现
Apr 20 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使用mysqldump命令导出数据库
2015/04/14 PHP
PHP实现适用于自定义的验证码类
2016/06/15 PHP
学习PHP session的传递方式
2016/06/15 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php post json参数的传递和接收处理方法
2018/05/31 PHP
yepnope.js 异步加载资源文件
2011/09/08 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jQuery 借助插件Lavalamp实现导航条动态美化效果
2013/09/27 Javascript
jQuery实现列表自动滚动循环滚动展示新闻
2014/08/22 Javascript
javascript模拟实现ajax加载框实例
2014/10/15 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
使用jQuery给input标签设置默认值
2016/06/20 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
2018/06/10 Javascript
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
Python函数中定义参数的四种方式
2014/11/30 Python
Python的Django框架中从url中捕捉文本的方法
2015/07/20 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
Python中创建二维数组
2018/10/17 Python
Python3如何判断三角形的类型
2020/04/12 Python
python 装饰器重要在哪
2021/02/14 Python
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
Chinti & Parker官网:奢华羊绒女装和创新针织设计
2021/01/01 全球购物
俄罗斯商务邀请函
2014/01/26 职场文书
小学信息技术教学反思
2014/02/10 职场文书
2014党员干部四风问题对照检查材料思想汇报
2014/09/24 职场文书
平安家庭事迹材料
2014/12/20 职场文书
离婚协议书怎么写
2015/01/26 职场文书
2016大学军训心得体会
2016/01/11 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
Python制作一个随机抽奖小工具的实现
2021/07/07 Python