vue單頁應用如何在頁面重新整理時保留狀態資料

王玉略發表於2018-03-13
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))
    })
複製程式碼

原文地址：王玉略的個人網站

相關文章