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模板编译原理
Nov 19 Vue.js
Vue 的 v-model用法实例
Nov 23 Vue.js
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
Vue实现小购物车功能
Dec 21 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
vue 根据选择的月份动态展示日期对应的星期几
Feb 06 Vue.js
详解Vue的七种传值方式
Feb 08 Vue.js
Vue2.x-使用防抖以及节流的示例
Mar 02 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue 实现弹窗关闭后刷新效果
Apr 08 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处理换行符的问题 \r\n
2013/06/13 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP随机数 C扩展随机数
2016/05/04 PHP
js或css实现滚动广告的几种方案
2010/01/28 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
Jqgrid表格随窗口大小改变而改变的简单实例
2013/12/28 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
全屏js头像上传插件源码高清版
2016/03/29 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
javascript容错处理代码(屏蔽js错误)
2017/01/20 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
解决vue移动端适配问题
2018/12/12 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
js实现验证码功能
2020/07/24 Javascript
Python入门篇之对象类型
2014/10/17 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
Pandas 重塑(stack)和轴向旋转(pivot)的实现
2019/07/22 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Jupyter Notebook打开任意文件夹操作
2020/04/14 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
研究生毕业鉴定
2014/01/29 职场文书
党课培训主持词
2014/04/01 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
爱耳日活动总结
2014/04/30 职场文书
教研处工作方案
2014/05/26 职场文书
化工专业自荐书
2014/06/16 职场文书
思想作风纪律整顿心得体会
2014/09/04 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
Linux安装apache服务器的配置过程
2021/11/27 Servers
JS高级程序设计之class继承重点详解
2022/07/07 Javascript