在Vue单页应用中,如果在某一个具体路由的具体页面下点击刷新,那么刷新后,页面的状态信息可能就会丢失掉。这时候应该怎么处理呢?如果你也有这个疑惑,这篇文章或许能够帮助到你
现在产品上有个需求:单页应用走到某个具体的页面,然后点击刷新后,刷新的页面要与刷新前的页面要保持一致。
这时候就需要我们保存刷新之前页面的状态。
在这个Vue单页应用中,王二是用Vuex作为状态管理的,一开始王二的思路是将Vuex里的数据同步更新到localStorage里。
即:一改变vuex里的数据,便触发localStorage。setItem方法,参考如下代码:
从“进口Vue Vue”
从“进口Vuex Vuex”
Vue.use (Vuex)
函数storeLocalStore(状态){
window.localStorage.setItem (“userMsg JSON.stringify(状态);
}
出口默认新Vuex.Store ({
状态:{
用户名:“王二”,
schedulename:“标题”,
scheduleid: 0,
},
突变:{
storeUsername(国家名称){
状态。用户名=名称
storeLocalStore(状态)
},
storeSchedulename(国家名称){
状态。schedulename=名字
storeLocalStore(状态)
},
storeScheduleid(状态,id) {
状态。scheduleid=数量(id)
storeLocalStore(状态)
},
}
})
然后在页面加载时再从localStorage里将数据取回来放到vuex里,于是王二在App.vue的钩创建子函数里写下了如下代码:
localStorage.getItem (“userMsg”),和美元。store.replaceState (JSON.parse (localStorage.getItem (“userMsg”)));//考虑到第一次加载项目时localStorage里没有userMsg的信息,所以在前面要先做判断
这样就能比较圆满的解决问题了。
以上的解决方法由于要频繁地触发localStorage。setItem方法,所以对性能很不友好。而且如果一直同步vuex里的数据到localStorage里,我们直接用localStorage做状态管理好了,似乎也没有必要再用vuex。
这时候王二想,如果有什么方法能够监听到页面的刷新事件,然后在那个监听方法里将Vuex里的数据储存到localStorage里,那该多好。
很幸运,还真有这样的监听事件,我们可以用beforeunload来达到以上目的,于是王二下了如下代码:
//在页面加载时读取localStorage里的状态信息
localStorage.getItem (“userMsg”),和美元。store.replaceState (JSON.parse (localStorage.getItem (“userMsg”)));//在页面刷新时将vuex里的信息保存到本地文件里
window.addEventListener (“beforeunload”,()=祝辞{
localStorage.setItem (“userMsg JSON.stringify(这一点。store.state美元))
})
这样的话,似乎就比较完美了。
王二在使用上述方法时,遇到了一个问题,就是:在开发阶段,如果在Vuex里添加新的字段,则新的字段不能被保存到localStorage里,于是上述代码修改如下:
//在页面加载时读取localStorage里的状态信息
localStorage.getItem (“userMsg”),和美元。store.replaceState (Object.assign(这一点。store.state美元,JSON.parse (localStorage.getItem (“userMsg”))));//在页面刷新时将vuex里的信息保存到本地文件里
window.addEventListener (“beforeunload”,()=祝辞{
localStorage.setItem (“userMsg JSON.stringify(这一点。store.state美元))
})
以上这篇vue单页应用在页面刷新时保留状态数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
