在使用 Vue 開發時，若使用者進行重複載入的動作，那原先的狀態如登入、預設選擇語系…等，就會一併消失了。vuex-persistedstate 可以有效的存取 vuex 的狀態到瀏覽器的儲存空間如 localStorage，這樣一來重新載入時就有機會可以取得狀態。
使用方法
官方網站：https://github.com/robinvdvleuten/vuex-persistedstate
你可以使用 npm 安裝，或是 cdn 的形式 ( 用 window.createPersistedState ) 來獲得相關的 Object。以下為使用 npm 安裝的範例：
1. 在 vuex 中用 import 的形式引入，並在建立新的 Vuex Instance 時將這個套件包含進去即可
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// vuex, index.ts import { createStore } from 'vuex' import dayjs from 'dayjs' // vuex-persistedstate start import createPersistedState from 'vuex-persistedstate' const storedVuexValue = window.localStorage.getItem('vuex') export const storedVuex = storedVuexValue ? JSON.parse(storedVuexValue) : undefined // vuex-persistedstate end export default createStore({ ......, plugins: [createPersistedState({ paths: ['selectedLanguage', 'demoModule.user'] })] }) |
2. 若要搭配其他的 Module 使用也是可以的，其中的重點參數為 paths。在這其中，paths 若為 [] 等同於不儲存任何狀態，指定的方式須以 moduleName.key 的形式。若我要儲存根目錄下的 selectedLanguage 狀態和 moduleA 的 keyA 狀態，那 paths 的寫法就是：[ “selectedLanguage”, “moduleA.keyA”]
3. 要注意的地方是：第一次載入 vue 實體時，並不會回存已經暫存的 vuex 狀態。你需要額外寫判斷式才能將其載入。一般情況下，是在有 vuex 的狀態改動時，才會同步保存下來。
|
1 2 3 4 5 6 7 8 9 10 |
import { storedVuex } from '@/store' const i18n = createI18n({ ......, locale: storedVuex ? storedVuex.selectedLanguage : defaultLocale }) export default i18n |
Reference
1. 更高效的vuex状态缓存方式-createPersistedState
按讚加入粉絲團
