使用vuex解决刷新页面state数据消失的问题记录


Posted in Javascript onMay 08, 2019

在实际的vue项目中,当我们的应用遇到多个组件之间的共享问题时,通常会用到Vuex(一个状态管理的插件,可以解决不同组件之间的数据共享和数据持久化),解决组件之间同一状态的共享问题。

因子:

  • Vuex优势:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到。
  • Vuex劣势:在刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。

言而总之:

实际问题:在vue项目中,使用Vuex做状态管理时,调试页面时,刷新后state上的数据消失了,该如何解决?

解决思路:将state中的数据放在浏览器sessionStorage和localStorage

解决办法:

存储到localStorage

通过监听页面的刷新操作,即beforeunload前存入本地localStorage,页面加载时再从本地localStorage读取信息
在App.vue中加入下面代码

created(){
 //在页面刷新时将vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
   localStorage.setItem("messageStore",JSON.stringify(this.$store.state))
  })
  
 //在页面加载时读取localStorage里的状态信息
  localStorage.getItem("messageStore") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("messageStore"))));
 }

使用vuex-persistedstate 插件

安装插件:npm install vuex-persistedstate --save

配置:

在store的index.js中,手动引入插件并配置

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState()]
})

该插件默认持久化所有state,当然也可以指定需要持久化的state:

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
 // ...
 plugins: [createPersistedState({
  storage: window.sessionStorage,
  reducer(data) {
   return {
   // 设置只储存state中的myData
   myData: data.myData
  }
  }
 })]

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript高级学习笔记整理
Aug 14 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
JavaScript去除数组里重复值的方法
Jul 13 Javascript
JS实现仿新浪黄色经典滑动门效果代码
Sep 27 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
AngularJS ng-repeat数组有重复值的解决方法
Oct 23 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
vue组件实现弹出框点击显示隐藏效果
Oct 26 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
微信小程序网络层封装的实现(promise, 登录锁)
May 08 #Javascript
详解微信小程序的不同函数调用的几种方法
May 08 #Javascript
微信小程序Page中data数据操作和函数调用方法
May 08 #Javascript
vue中使用props传值的方法
May 08 #Javascript
vue权限问题的完美解决方案
May 08 #Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
May 08 #Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 #Javascript
You might like
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
php中fsockopen用法实例
2015/01/05 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
jQuery对象的length属性用法实例
2014/12/27 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
js 转json格式的字符串为对象或数组(前后台)的方法
2016/11/02 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
原生JavaScript实现的简单省市县三级联动功能示例
2017/05/27 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
微信小程序iBeacon测距及稳定程序的实现解析
2019/07/31 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
angular共享依赖的解决方案分享
2020/10/15 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[01:27]DOTA2电竞之夜 今夜共饮庆功酒
2014/08/02 DOTA
[05:00]第二届DOTA2亚洲邀请赛主赛事第三天比赛集锦.mp4
2017/04/04 DOTA
[01:06:43]完美世界DOTA2联赛PWL S3 PXG vs GXR 第二场 12.19
2020/12/24 DOTA
使用PYTHON创建XML文档
2012/03/01 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python爬取酷狗音乐排行榜
2019/02/20 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
解决Django连接db遇到的问题
2019/08/29 Python
python操作yaml说明
2020/04/08 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
留学生如何写好自荐信
2013/12/27 职场文书
管道维修工岗位职责
2013/12/27 职场文书
小学优秀班干部事迹材料
2014/05/25 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
庆祝国庆节标语
2014/10/09 职场文书
高一英语教学反思
2016/03/03 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python