在Vue單頁(yè)應(yīng)用中，如果在某一個(gè)具體路由的具體頁(yè)面下點(diǎn)擊刷新，那么刷新后，頁(yè)面的狀態(tài)信息可能就會(huì)丟失掉。這時(shí)候應(yīng)該怎么處理呢？如果你也有這個(gè)疑惑，這篇文章或許能夠幫助到你

南昌縣ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話(huà)聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！

一、問(wèn)題

現(xiàn)在產(chǎn)品上有個(gè)需求：?jiǎn)雾?yè)應(yīng)用走到某個(gè)具體的頁(yè)面，然后點(diǎn)擊刷新后，刷新的頁(yè)面要與刷新前的頁(yè)面要保持一致。

這時(shí)候就需要我們保存刷新之前頁(yè)面的狀態(tài)。

二、一種解決方案

在這個(gè)Vue單頁(yè)應(yīng)用中，王二是用Vuex作為狀態(tài)管理的，一開(kāi)始王二的思路是將Vuex里的數(shù)據(jù)同步更新到localStorage里。

即：一改變vuex里的數(shù)據(jù),便觸發(fā)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: "標(biāo)題",
    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)
    },
  }
})

然后在頁(yè)面加載時(shí)再?gòu)膌ocalStorage里將數(shù)據(jù)取回來(lái)放到vuex里，于是王二在 App.vue 的 created 鉤子函數(shù)里寫(xiě)下了如下代碼：

localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
 
//考慮到第一次加載項(xiàng)目時(shí)localStorage里沒(méi)有userMsg的信息，所以在前面要先做判斷

這樣就能比較圓滿(mǎn)的解決問(wèn)題了。

三、另一種解決方案

以上的解決方法由于要頻繁地觸發(fā) localStorage.setItem 方法，所以對(duì)性能很不友好。而且如果一直同步vuex里的數(shù)據(jù)到localStorage里，我們直接用localStorage做狀態(tài)管理好了，似乎也沒(méi)有必要再用vuex。

這時(shí)候王二想，如果有什么方法能夠監(jiān)聽(tīng)到頁(yè)面的刷新事件，然后在那個(gè)監(jiān)聽(tīng)方法里將Vuex里的數(shù)據(jù)儲(chǔ)存到localStorage里，那該多好。

很幸運(yùn)，還真有這樣的監(jiān)聽(tīng)事件，我們可以用 beforeunload 來(lái)達(dá)到以上目的，于是王二在 App.vue 的 created 鉤子函數(shù)里寫(xiě)下了如下代碼：

  //在頁(yè)面加載時(shí)讀取localStorage里的狀態(tài)信息
  localStorage.getItem("userMsg") && this.$store.replaceState(JSON.parse(localStorage.getItem("userMsg")));
  
  //在頁(yè)面刷新時(shí)將vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
    localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
  })

這樣的話(huà)，似乎就比較完美了。

2018年03月27日補(bǔ)充：

王二在使用上述方法時(shí)，遇到了一個(gè)問(wèn)題，就是：在開(kāi)發(fā)階段，如果在Vuex里添加新的字段，則新的字段不能被保存到localStorage里，于是上述代碼修改如下：

  //在頁(yè)面加載時(shí)讀取localStorage里的狀態(tài)信息
  localStorage.getItem("userMsg") && this.$store.replaceState(Object.assign(this.$store.state,JSON.parse(localStorage.getItem("userMsg"))));
  
  //在頁(yè)面刷新時(shí)將vuex里的信息保存到localStorage里
  window.addEventListener("beforeunload",()=>{
    localStorage.setItem("userMsg",JSON.stringify(this.$store.state))
  })

以上這篇vue單頁(yè)應(yīng)用在頁(yè)面刷新時(shí)保留狀態(tài)數(shù)據(jù)的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持創(chuàng)新互聯(lián)。