vuex刷新页面后如何解决丢失store的数据问题
vuex刷新页面后丢失store的数据
提出问题
最近遇到个问题,vue中vuex中的store数据,会在页面刷新后初始化,为了解决这一问题决定将store里面数据在页面刷新前保存到sessionStorage,至于为何用他,因为页面关闭后他会被清空,localStorage则会一直存在,cookie又太小,因此sessionStorage最合适。
解决方案
在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.store的replaceState方法,替换store的根状态
在beforeunload方法中将store.state存储到sessionstorage中。
export default { name: 'app', created () { // 在页面加载时读取sessionStorage if (sessionStorage.getItem('store')) { this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store')))) } // 在页面刷新时将store保存到sessionStorage里 window.addEventListener('beforeunload', () => { sessionStorage.setItem('store', JSON.stringify(this.$store.state)) }) } }
vuex刷新页面数据丢失(数据持久化)
前提:
为什么要让vuex数据持久化:
在使用vuex的时候,会发现刷新页面之后state中存储的数据会被重置,因为刷新浏览器的时候会导致整个页面重新加载,vuex的state也会全部重新加载,所以为了防止这类情况的发生,我们会将vuex中的数据进行本地存储,防止页面刷新丢失vuex中的数据。
存储到localStorage中
首先安装vuex-persistedstate
npm install vuex-persistedstate -S
vuex-persistedstate默认存储到localStorage,使用如下:
在store文件夹下面的index.js中引入
import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) const store = new Vuex.Store({ plugins: [createPersistedState()], })
存储到sessionStorage中
使用vuex-persistedstate存储到sessionStorage,如下:
import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) const store = new Vuex.Store({ plugins: [createPersistedState({ storage: window.sessionStorage })], })
指定数据持久化
使用vuex-persistedstate指定需要持久化的state数据,如下:
import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" Vue.use(Vuex) const store = new Vuex.Store({ plugins: [createPersistedState({ storage: window.sessionStorage, // 方法1:用reducer,这里的val是由store里面的所有state,不加reducer为储存所有,reducer为指定存储 reducer(val) { return { // 只储存state中的name keyName: val.name } } // 方法2:用paths,数组里面填模块名,存储指定模块 // paths: ['Home', 'Order'] })] })
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持猪先飞。
原文出处:https://juejin.cn/post/6909279383379247117
相关文章
- 这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下...2021-09-29
- 这篇文章主要分享vuex中mapState思想及应用,在需求开发过程中,有的接口返回的结果中有很多字段需要展示到页面上。通常可以将这些字段在.vue文件中封装为计算属性,或者重新将对应字段赋值到 data 中的字段来达到便于使用的目的,具体内容,我们一起来看下面文章内容吧...2021-10-09
- 这篇文章主要介绍了解决vuex刷新数据消失问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-12
- 这篇文章介绍了ASP.NET刷新页面的几种方法,有需要的朋友可以参考一下...2021-09-22
- 这篇文章说明了如何使用Vue去刷新当前页面的多种方法实例,有完成的代码提供参考,希望对你有所帮助...2021-06-25
未来四年苹果App Store应用数量将超500万:游戏领先
凤凰科技讯 北京时间8月11日消息,据科技博客TechCrunch报道,应用市场分析公司Sensor Tower周三发布的一份最新报告称,尽管人们日常使用的应用在App Store中只占少数,但开发者对App Store应用开发贡献丝毫没有放缓迹象,预计在未来四年中,App Store中的活跃应用数量将超过500万。...2016-08-27- 这篇文章主要介绍了深入浅析Extjs中store分组功能的使用方法的相关资料,需要的朋友可以参考下...2016-04-22
- 这篇文章主要给大家介绍了Vue.js实战之Vuex的入门教程,文中介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。...2017-04-03
- 服务器数据存储安全是保障服务器正常运行的重要的环节,同时也是企业网络信息化建设的核心。...2016-01-27
ASP.NET在IE10中无法判断用户已登入及Session丢失问题解决方法
IE10中Session丢失问题引起众多业内人士的关注,今天发现在IE10中登录网站时,使用表单验证机制(FormsAuthentication)却无法判断该用户已登入,保存的Session总会丢失,本文将介绍解决方法,感兴趣的朋友可以参考下,或许对你有所帮助...2021-09-22解决uploadify使用时session发生丢失问题的方法
这篇文章主要为大家详细介绍了uploadify使用时发现session发生丢失问题的解决方法,遇到过类似问题的朋友可以参考本文进行解决...2021-09-22- 这篇文章主要分享了MySQL 数据丢失排查的一个案例,帮助大家更好的理解和学习使用MySQL数据库,感兴趣的朋友可以了解下...2021-05-08
- 这篇文章主要为大家介绍了Vuex的属性和作用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助...2021-12-27
- 这篇文章主要介绍了vue3利用store实现记录滚动位置的示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下...2021-04-09
- 关闭模式窗口后,需要刷新父页面,但是模式窗口关闭后,父页面总是会弹出重试消息框,遇到此问题的朋友看下解决方法哈...2021-09-22
ASP.NET MVC异步获取和刷新ExtJS6 TreeStore
这篇文章主要为大家详细介绍了ASP.NET MVC异步获取和刷新ExtJS6 TreeStore的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22- 这篇文章主要介绍了关于vuex强刷数据丢失问题解析,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-09
- 这篇文章主要和大家一起一步步打造一个简单的MVC电商网站,MVC电商网站BooksStore第四篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22