使用 vuex-persistedstate 維持 Vuex 狀態

4 min readSep 19, 2020

在使用 vue 時，我們常會利用 vuex 來集中管理組件的狀態，例如使用者授權狀態或是購物車內容，但是缺點就是當我們重新整理頁面，存在 state 中的狀態就會被清空。為了讓使用者刷新頁面不用重新登入，我們就需要在刷新畫面後重新拿回資料。

方法一：透過 API 重新向後端請求使用者資料

將 token 存入 localStorage
在路由改變時透過 beforeRouteUpdate 來重新向伺服器發送 token

router.beforeEach((to, from, next) => {
    const token = localStorage.getItem('token')
    const stateToken = store.state.token    if (token !== stateToken) { 
        store.dispatch('fetchUser') //向後端請求使用者資料的 action
    }    next()
})

方法二：使用 vuex-persistedstate 套件將狀態存入 localStorage

npm 安裝

$ npm install --save vuex-persistedstate

store 中引入

import createPersistedState from "vuex-persistedstate"const store = new Vuex.Store({
  state: {
    user: '',
    isAuthenticated: '',
    token: '',
    //...
  },
  plugins: [createPersistedState()] //加入
})

這樣可以將整包 state 狀態保存在 localStorage 中，下次重新整理頁面時vuex-persistedstate 會自動幫我們將狀態回復。也可以設置保存在 sessionStore中：

plugins: [createPersistedState({       
    storage: window.sessionStorage   
})]

如果只想保存部分資料可以使用參數 reducer

plugins: [createPersistedState({       
    reducer(val) { 
        return {    
           user: val.user //只儲存使用者資料   
        }      
    }   
})]

secure-ls 加密 localStorage

不過訊息這樣赤裸裸地放在那裡好像不太好，如果想加密 localStorage 中的資料可以使用 secure-ls

$ npm install secure-ls

在 store 中引入套件

import SecureLS from "secure-ls"
const ls = new SecureLS({ isCompression: false })const store = new Vuex.Store({
  state: {
     //...
  },
  plugins: [
    createPersistedState({
        key: 'userInfo',  //儲存在 localStorage 的 key
        storage: {
            getItem: key => ls.get(key),
            setItem: (key, value) => ls.set(key, value),
            removeItem: key => ls.remove(key)
        }
    })