vue单页应用在页面刷新时保留状态数据的方法
在Vue单页应用中，如果在某一个具体路由的具体页面下点击刷新，那么刷新后，页面的状态信息可能就会丢失掉。这时候应该怎么处理呢？如果你也有这个疑惑，这篇文章或许能够帮助到你
一、问题
现在产品上有个需求：单页应用走到某个具体的页面，然后点击刷新后，刷新的页面要与刷新前的页面要保持一致。
这时候就需要我们保存刷新之前页面的状态。
二、一种解决方案
在这个Vue单页应用中，王二是用Vuex作为状态管理的，一开始王二的思路是将Vuex里的数据同步更新到localStorage里。
即：一改变vuex里的数据,便触发localStorage.setItem 方法，参考如下代码：
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
function storeLocalStore (state) {
window.localStorage.setItem("userMsg",JSON.stringify(state));
}
export default new Vuex.Store({
state: {
username: "王二",
schedulename: "标题",
scheduleid: 0,
},
mutations: {
storeUsername (state,name) {
state.username = name
storeLocalStore (state)
},
storeSchedulename (state,name) {
state.schedulename = name
storeLocalStore (state)
},
storeScheduleid (state,id) {
state.scheduleid = Number(id)
storeLocalStore (state)
},
}
})
然后在页面加载时再从localStorage里将数据取回来放到vuex里，于是王二在 App.vue 的 created 钩子函数里写下了如下代码：
localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
//考虑到第一次加载项目时localStorage里没有userMsg的信息，所以在前面要先做判断
这样就能比较圆满的解决问题了。
三、另一种解决方案
以上的解决方法由于要频繁地触发 localStorage.setItem 方法，所以对性能很不友好。而且如果一直同步vuex里的数据到localStorage里，我们直接用localStorage做状态管理好了，似乎也没有必要再用vuex。
这时候王二想，如果有什么方法能够监听到页面的刷新事件，然后在那个监听方法里将Vuex里的数据储存到localStorage里，那该多好。
很幸运，还真有这样的监听事件，我们可以用 beforeunload 来达到以上目的，于是王二在 App.vue 的 created 钩子函数里写下了如下代码：
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
这样的话，似乎就比较完美了。
2018年03月27日补充：
王二在使用上述方法时，遇到了一个问题，就是：在开发阶段，如果在Vuex里添加新的字段，则新的字段不能被保存到localStorage里，于是上述代码修改如下：
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload",()=>{
localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
})
以上这篇vue单页应用在页面刷新时保留状态数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue进行前端开发中事件处理是必不可少的功能,下面这篇文章主要给大家介绍了关于VUE事件处理之@click用法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
本篇文章主要介绍了webstorm和.vue中es6语法报错的解决方法，小编总结了webstorm和.vue中出现的es6语法报错，避免大家采坑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-05-05
这篇文章主要为大家详细介绍了Vue Echarts实现仪表盘案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-12-12
最近需要在项目中使用地图显示点位信息,所以引入了腾讯地图,这篇文章主要给大家介绍了关于Vue引入腾讯地图(搜索获取定位)的相关资料,需要的朋友可以参考下2023-10-10
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
这篇文章主要介绍了Vue项目中使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了vue3没有this的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
这篇文章主要给大家介绍了关于vue打包后修改配置后端IP地址、端口等信息的两种方法,文中通过代码示例以及图文介绍的非常详细,对大家学习或者使用vue打包具有一定的参考借鉴价值,需要的朋友可以参考下2023-09-09
这篇文章主要给大家介绍了关于Vue中forEach()使用方法的相关资料,forEach和map是数组的两个方法,作用都是遍历数组,在vue项目的处理数据中经常会用到,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了详解vue 兼容IE报错解决方案，详细的介绍了几种原因及其解决方案，非常具有实用价值，需要的朋友可以参考下2018-12-12
vuex中的state、getters、mutations、actions之间的关系解读
这篇文章主要介绍了vuex中的state、getters、mutations、actions之间的关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论