vue单页应用在页面刷新时保留状态数据的方法

vue单页应⽤在页⾯刷新时保留状态数据的⽅法
在Vue单页应⽤中，如果在某⼀个具体路由的具体页⾯下点击刷新，那么刷新后，页⾯的状态信息可能就会丢失掉。

这时候应该怎么处理呢？如果你也有这个疑惑，这篇⽂章或许能够帮助到你
⼀、问题
现在产品上有个需求：单页应⽤⾛到某个具体的页⾯，然后点击刷新后，刷新的页⾯要与刷新前的页⾯要保持⼀致。

这时候就需要我们保存刷新之前页⾯的状态。

⼆、⼀种解决⽅案
在这个Vue单页应⽤中，王⼆是⽤Vuex作为状态管理的，⼀开始王⼆的思路是将Vuex⾥的数据同步更新到localStorage⾥。

即：⼀改变vuex⾥的数据,便触发localStorage.setItem ⽅法，参考如下代码：
import Vue from "vue"
import Vuex from "vuex"
e(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) {
ername = 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单页应⽤在页⾯刷新时保留状态数据的⽅法就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。