頁面重新整理後，vuex中資料丟失、清空的解決方案 vuex-persistedstate

摘要： 場景之一 應用API進行使用者身份驗證，將登入狀態儲存為Vuex狀態中的布林值。 當用戶登入時，設定了登入狀態 並相應地有條件地顯示 登入/登出 按鈕。 ​ 但是當重新整理頁面時，vue應用程式的狀態將丟失並重置為預設值。...

場景之一

解決方案

可以使用vuex-persistedstate 。這是一個用於vuex 在頁面重新整理之間處理和儲存狀態的外掛。

示例程式碼：

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
// ...
plugins: [
createPersistedState()
]
})

以上是將狀態儲存在 localStorage ，也可以使用js-cookie 將狀態儲存在cookie

import { Store } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
 
const store = new Store({
// ...
plugins: [
createPersistedState({
storage: {
getItem: key => Cookies.get(key),
// 參考 https://github.com/js-cookie/js-cookie#json
setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
removeItem: key => Cookies.remove(key)
}
})
]
})

總結：

1. 需要安裝 js-cookie
2. getItem 載入儲存的狀態
3. setItem 儲存狀態
4. removeItem 刪除儲存的狀態

vuex-persistedstate 文件和安裝說明：https ：//www.npmjs.com/package/vuex-persistedstate