将需要保存在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. tesseract-ocr,tesseract,pytesseract在windows下怎么安装

    废话不多说,直接介绍如何下载安装tesseract-OCR以及pytesseract和PIL资源 文末百度网盘都有Tesseract是一个开源的OCR引擎,能识别100多种语言(中,英,韩,日,德,法 ...

  2. css美化checkbox的样式

    使用iCheck插件可以改变checkbox.radio的原有样式,但是改变的样式尺寸有些大修改起来也比较麻烦,并且需要使用iCheck的调用方法才能使用,有时候iCheck方法还会覆盖掉同级元素的c ...

  3. hdu4126_hdu4756_求最小生成树的最佳替换边_Kruskal and Prim

    目录 Catalog Solution: (有任何问题欢迎留言或私聊 && 欢迎交流讨论哦 Catalog Problem:  Portal: hdu4126 hdu4756  原题目 ...

  4. struts漏洞处理--老项目struts版本升级遇到的问题

    struts漏洞S2-016被扫描出,要求升级struts版本,查看生产struts版本2.0.12,该漏洞影响版本2.3.15以下,上网搜索,struts2.5以上的要求jdk1.7,由于项目过老, ...

  5. KdPrint/DbgPrint and UNICODE_STRING/ANSI_STRING

    typedef struct _UNICODE_STRING { USHORT Length; USHORT MaximumLength; PWSTR Buffer; } UNICODE_STRING ...

  6. 04E: Sub-process /usr/bin/dpkg returned an error code (1)

  7. <爬虫实战>糗事百科

    1.糗事百科段子.py # 目标:爬取糗事百科段子信息(文字) # 信息包括:作者头像,作者名字,作者等级,段子内容,好笑数目,评论数目 # 解析用学过的几种方法都实验一下①正则表达式.②Beauti ...

  8. Nginx常用功能配置二

    Nginx常用功能配置二 Nginx location匹配设置 location作用:可以根据用户请求的URI来执行不同的应用,根据用户请求的网站的地址URL匹配. location语法: locat ...

  9. java——有1、2、3、4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少?

    package java_day10; /* * 有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? */ public class Demo04 { public stat ...

  10. GNU 交叉工具链的介绍与使用

    常用工具介绍 名称 归属 作用 arm­linux­as binutils 编译 ARM 汇编程序 arm­linux­ar binutils 把多个.o 合并成一个.o 或静态库(.a) arm­l ...