将需要保存在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页面刷新数据丢失的问题的更多相关文章

  1. vuex页面刷新数据丢失的解决办法

    在vue项目中用vuex来做全局的状态管理, 发现当刷新网页后,保存在vuex实例store里的数据会丢失. 原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例 ...

  2. 解决angular2页面刷新后报404错误

    如果你的angular项目部署到一个tomcat容器里面,localhost:8080是JavaWeb的主页,localhost:8080/driver/login是你angular2项目的登陆地址. ...

  3. AngularJS进阶(二十八)解决AngualrJS页面刷新导致异常显示问题

    解决AngualrJS页面刷新导致异常显示问题 绪 俗话说,细节决定成败,编程亦是如此.编程过程中我们可能会不自觉的忽视一些细节问题,殊不知,这些细节正是导致页面显示出现问题的地方.今略举一例,与君共 ...

  4. vue案例 - vuex+sessionstorage解决vue项目刷新后页面空白/数据丢失

    第一部分 SessionStorage 首先查看sessionStorage的地方在控制台的 Application > Storage > Session Storage这里: 根据se ...

  5. 使用sessionStorage解决vuex在页面刷新后数据被清除的问题

    https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...

  6. 2、vuex页面刷新数据不保留,解决方法(转)

    今天这个问题又跟页面的刷新有一定的关系,虽然说跟页面刷新的关系不大,但确实页面刷新引起的这一个问题. 场景: VueX里存储了 this.$store.state.PV这样一个变量,这个变量是在app ...

  7. npm安装vuex及防止页面刷新数据丢失

    npm install vuex 在项目scr目录下新建store文件夹,在store文件夹下新建index.js文件. import Vue from 'vue'; import Vuex from ...

  8. vue传参页面刷新数据丢失问题

    在做vue的时候,经常会遇到组件之间数据的传递问题,通过params或者query传参,但是,当页面刷新的时候,数据会丢失,找不到数据.今天经过总结,解决了这个问题.通过了一下几种情况进行传值: 通过 ...

  9. vue页面刷新数据丢失问题

    参考: https://blog.csdn.net/aliven1/article/details/80743470          https://blog.csdn.net/liang37712 ...

随机推荐

  1. Kotlin Doc

    { https://www.runoob.com/kotlin/kotlin-eclipse-setup.html }

  2. java web 在tomcat没有正常输出

    目录 文章背景 目录 问题介绍 问题解决 说明 参考文章 版本记录 文章背景 调试程序时候突然发现一些位置设置的日志输出没有了,最后总算是解决了! 目录 问题介绍 本地运行时候的环境如下: windo ...

  3. NX二次开发-UDO用户自定义对象(UFUN)【持续完善】

    每当提起UDO总是会让我想起大专毕业那会失业找工作,后来有个宝贵机会去了软件公司上班,拿到了我人生中的第一个NX二次开发项目,一个关于测量汽车前后左右摄像头的项目.当时那个项目就用到了UDO,对于只看 ...

  4. go语言type使用小技巧

    import "fmt" type Rank int const ( Rank001 Rank = iota Rank002 Rank003 Rank004 ) var rewar ...

  5. CPUID 指令的使用

    使用 CPUID 指令可以从 processor 厂商里获得关于 processor 的详细信息,CPUID 指令是从 Intel 486 处理器以后开始加入支持. 1. 检测处理器是否支持 cpui ...

  6. 10.2 External interrupt/event controller (EXTI)

    EXTI控制器的主要特点如下: 每个中断/事件线上的独立触发器和掩码 每个中断行的专用状态位 生成最多20个软件事件/中断请求 脉冲宽度小于APB2时钟周期的外部信号检测. 每条中断线路的专用状态位生 ...

  7. 2019 牛客多校第一场 A Equivalent Prefixes

    题目链接:https://ac.nowcoder.com/acm/contest/881/A 题目大意 定义 RMQ(u, L, R) 为 u 数组在区间 [L, R] 上最小值的下标. 如果有 2 ...

  8. 剑指offer——14机器人的运动范围

    题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能 ...

  9. SQLServer 安装失败可能的原因

    问题:安装的时候显示参数指定的目录无效 解决:你的安装盘使用了文件/文件夹压缩功能,去掉压缩属性即可! 建议不要轻易使用储存盘的压缩功能

  10. nodejs中命令行和node交互模式的区分

    来自:廖雪峰教程 么么哒~ 命令行模式和Node交互模式 请注意区分命令行模式和Node交互模式. 看到类似C:\>是在Windows提供的命令行模式: 在命令行模式下,可以执行node进入No ...