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.extend 登录注册模态框的实现
Dec 29 Vue.js
Vue项目中使用mock.js的完整步骤
Jan 12 Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
Vue仿Bibibili首页的问题
Jan 21 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue-element-admin项目导入和导出的实现
May 21 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
详解gantt甘特图可拖拽、编辑(vue、react都可用 highcharts)
Nov 27 Vue.js
Element-ui Layout布局(Row和Col组件)的实现
Dec 06 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
vue3不同环境下实现配置代理
May 25 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
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php绘图之加载外部图片的方法
2015/01/24 PHP
PHP中PDO的事务处理分析
2016/04/07 PHP
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
node.js中的buffer.toJSON方法使用说明
2014/12/14 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
angularjs在ng-repeat中使用ng-model遇到的问题
2016/01/21 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
Javascript获取随机数的实现方法
2016/06/22 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
基于express中路由规则及获取请求参数的方法
2018/03/12 Javascript
Vue框架里使用Swiper的方法示例
2018/09/20 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
2019/11/09 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Python开发编码规范
2006/09/08 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
详解Python如何获取列表(List)的中位数
2016/08/12 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python 实现使用空值进行赋值 None
2020/03/12 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
python 如何用urllib与服务端交互(发送和接收数据)
2021/03/04 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
Linux操作面试题
2015/02/11 面试题
什么是SCM(软件配置管理)
2014/08/16 面试题
计算机求职自荐信范文
2014/04/19 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
德能勤绩工作总结
2015/08/11 职场文书
高二数学教学反思
2016/02/18 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
Redis安装使用RedisJSON模块的方法
2022/03/23 Redis