将需要保存在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. 酷狗mac版如何新建歌单?酷狗mac版收藏歌单方法

    很多朋友们都喜欢使用酷狗音乐听音乐,不过最近有使用酷狗mac音乐播放器的Mac新用户,想要新建歌单收藏歌单,但有不知道如何操作,那么苹果电脑酷狗mac版如何新建歌单收藏歌单呢?针对此问题,本文给大家介 ...

  2. Delphi 窗体的释放和判断窗体是否存在

    常规释放和关闭: Form.Free   -   释放Form占用的所有资源.Free后,Form指针不能再使用,除非对Form重新赋值.   Form.Hide   -   隐藏Form.可以调用f ...

  3. Delphi全面控制Windows任务栏

    使用Windows95/NT/98操作系统的用户知道:Windows正常启动后,在电脑屏幕下方出现一块 任务栏.从系统功能角度而言,整个任务栏包括几个不同的子区域,从左至右依次是:开始 按钮.应用程序 ...

  4. lua的运算符

    1.赋值运算符 --赋值 str="helllo".."world" print(str) a,b=10,20 print(a,b) c,d,e=1,2 pri ...

  5. NX二次开发-遍历当前part所有component,把装配子部件设置成工作部件

    NX11+VS2013 #include <uf.h> #include <uf_disp.h> #include <uf_modl.h> #include < ...

  6. redis和redis php扩展安装

    redis的源码安装 wget http://download.redis.io/redis-stable.tar.gz tar -zxvf redis-stable.tar.gz cd redis- ...

  7. Mac OS 快速查询技巧

    今天不知道按到什么快捷键弹出了这个搜索框,试了试很强大 后来查了才知道要双击键盘上的key (⌘)就会弹出,这个搜索很强大,要先安装QQ,QQ自带的 版权声明:本文为博主原创文章,未经博主允许不得转载 ...

  8. Python-爬虫-HTTP协议请求之GET请求

    我们在百度搜索时,输入关键词,比如“hello”,URL发生变化,如下: https://www.baidu.com/s?wd=hello&rsv_spt=1&rsv_iqid=0xf ...

  9. Java-Class-@I:org.springframework.web.bind.annotation.RequestMapping

    ylbtech-Java-Class-@I:org.springframework.web.bind.annotation.RequestMapping 1.返回顶部   2.返回顶部 1. pack ...

  10. Ubuntu安裝nginx-1.6.2

    1.在執行完./configure 和make install 後出現 test -d '/usr/local/nginx/logs'         || mkdir -p '/usr/local/ ...