vue單頁應用如何在頁面刷新時保留狀態數據

在Vue單頁應用中，若是在某一個具體路由的具體頁面下點擊刷新，那麼刷新後，頁面的狀態信息可能就會丟失掉。這時候應該怎麼處理呢？若是你也有這個疑惑，這篇文章或許可以幫助到你

1、問題

如今產品上有個需求：單頁應用走到某個具體的頁面，而後點擊刷新後，刷新的頁面要與刷新前的頁面要保持一致。

這時候就須要咱們保存刷新以前頁面的狀態。

2、一種解決方案

在這個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的信息，因此在前面要先作判斷
複製代碼

這樣就能比較圓滿的解決問題了。

3、另外一種解決方案

以上的解決方法因爲要頻繁地觸發 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))
    })
複製代碼

---

原文地址：王玉略的我的網站