结合sessionStorage解决vuex页面刷新数据丢失的问题
将需要保存在vuex中的数据同时保存在sessionStorage中即可:
import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); const state = {
count: 0,
}; const mutations = {
increaseCount(state, num) {
state.count = state.count + num;
sessionStorage.setItem('count', JSON.stringify(state.count));
},
reduceCount(state, num) {
state.count = state.count - num;
sessionStorage.setItem('count', JSON.stringify(state.count));
}
}
// 页面刷新时,会从sessionStorage中重新读取并赋值
for(let key in state) {
sessionStorage.getItem(key) ? state[key] = sessionStorage.getItem(key) : false;
}
export default new Vuex.Store({
state,
mutations
})
结合sessionStorage解决vuex页面刷新数据丢失的问题的更多相关文章
- vuex页面刷新数据丢失的解决办法
在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...
- 解决angular2页面刷新后报404错误
如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...
- AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题
解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...
- vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失
第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- 2、vuex页面刷新数据不保留,解决方法(转)
今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...
- npm安装vuex及防止页面刷新数据丢失
npm install vuex 在项目scr目录下新建store文件夹,在store文件夹下新建index.js文件. import Vue from 'vue'; import Vuex from ...
- vue传参页面刷新数据丢失问题
在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...
- vue页面刷新数据丢失问题
参考: https://blog.csdn.net/aliven1/article/details/80743470 https://blog.csdn.net/liang37712 ...
随机推荐
- winfrom设置webBrowser框架默认的IE内核版本
要实现设置webBrowser框架默认的IE内核版本的功能需要三个方法 1:修改注册表信息来兼容当前程序 /// <summary> /// 修改注册表信息来兼容当前程序 /// /// ...
- 暑假集训test-8-29
今天瓜成一坨了. 瓜的说不出话来. 直接退役算了我. T1 傻逼题,但是我傻逼地敲了一个线段树合并,然后把空间炸了,只剩20分, 直接dfs维护子树大小,子树中最大最小值即可统计答案. //Achen ...
- Mac 精品软件
Snagit:Mac 平台下最优秀的屏幕截图软件,可以录制屏幕视频.截图以及对截图进行加工. Flux 4:强大易用的网页设计工具,不需要学习编程即可在一天内建成一个专业的网站 Jump Deskto ...
- Greenplum(PostgreSql)函数实现批量删除表
项目做库迁移,前期需要经常调整表结构语句,涉及多次的批量drop,本着偷懒精神写了这个函数.鉴于本函数在生产环境有巨大风险,建议测试完毕后立即删除. 主要步骤很简单:1)从pg_tables查询得到相 ...
- project2_login(登录窗口)
该project是在网易云课堂上的公开课<用 python 和 tkinter 做简单的窗口视窗>课程当中学习的,是该课程中的一个结课小项目,项目中的知识点内容涉及该课程中所学习到的大多数 ...
- IDEA web 开发环境搭建
最近由eclipse 换 IDEA ,记录下开发环境的搭建过程. 1 配置idea vim 既可以使用IDEA方便的代码提示和调试功能,又可以方便使用vim编辑文件,安装完成后显示为vim Emula ...
- 解决jqGrid中,当前页一直显示为0的问题
项目中,经常会见到使用 jqGrid 进行一些数据的列表展示,而且使用起来也比较方便.但是有时会遇到一些奇怪的问题,比如前几天我就遇到了在使用 jqGrid 时,当前页一直显示为 0 的问题.下图就是 ...
- Restoring Road Network Floyd
问题 C: Restoring Road Network 时间限制: 1 Sec 内存限制: 128 MB提交: 731 解决: 149[提交] [状态] [讨论版] [命题人:admin] 题目 ...
- Neo4j 3.5发布,在索引方面大幅增强
Neo4j 3.5版本已正式发布,这也是Neo4j宣布企业版闭源以来发布的第一个版本. 这个版本在性能.资源使用率以及安全方面均有增强,我们可以先快速浏览一下这个版本: 全文索引 基于Index的快速 ...
- Ubuntu环境下Postgres源码文件编译安装步骤
step1:官网下载postgres源码 URL:https://www.postgresql.org/ftp/source/ step2:解压源码文件 tar -zxvf postgresql-12 ...