将需要保存在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. List之取不同元素

    1.工具-->NuGet包管理器-->管理解决方案的NuGet包程序包 2.添加System.Linq包 3.引用 using System.linq List<int> li ...

  2. DOM——属性操作

    属性操作 非表单元素的属性 href.title.id.src.className  var link = document.getElementById('link'); console.log(l ...

  3. 【代码工具】Lombok来优雅的编码

    前言 Lombok 是一种 Java™ 实用工具,可用来帮助开发人员消除 Java 的冗长,尤其是对于简单的 Java 对象(POJO).它通过注解实现这一目的. 正文 添加依赖 在 pom.xml ...

  4. delphi 获取文件图标

    {根据文件的名字得到此文件在系统中对应大小的图标large=true(64*64) false(32*32)}procedure GetFileIcon(TypeName: Widestring; I ...

  5. NX二次开发-UFUN创建块UF_MODL_create_block1

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> UF_initialize(); UF_FEATURE_SIGN Sign = ...

  6. 源码安装zabbix-oracle

    源码安装zabbix_agent4.0.3   1.源码包下载地址:https://www.zabbix.com/download_sources 2.下载完后上传在任意目录用root用户创建以下脚本 ...

  7. map和unordered_map使用小结

    map和unordered_map unordered_map简介: #include <cstdio> #include <iostream> #include <un ...

  8. scrapy的使用-scrapy shell

    进入     该目录下执行scrapy shell 文件, 在命令行可执行该文件中链接的xpath语法,和BeautifulSoup语法.

  9. 应用Dubbo框架打造仿猫眼项目 理解微服务核心思想

    1:传统应用带来的问题 单一业务开发的迭代问题              扩容困难              部署回滚困难2:微服务概述 微服务是一种将业务系统进一步拆分的架构风格          ...

  10. ES6 学习 -- 字符串新增方法

    1.检测字符串中是否包含某个字符 ES5方法:string.indexOf("需要检测的字符"),如果返回值为-1,则说明当前字符串中不存在这个字符,返回值不为-1,则 是当前字符 ...