[筆記] 用 vuex-persistedstate 來保持你的 vuex 狀態 @地瓜大的飛翔旅程

章節連結

使用方法
Reference

在使用 Vue 開發時，若使用者進行重複載入的動作，那原先的狀態如登入、預設選擇語系…等，就會一併消失了。vuex-persistedstate 可以有效的存取 vuex 的狀態到瀏覽器的儲存空間如 localStorage，這樣一來重新載入時就有機會可以取得狀態。

使用方法

官方網站：https://github.com/robinvdvleuten/vuex-persistedstate

你可以使用 npm 安裝，或是 cdn 的形式 ( 用 window.createPersistedState ) 來獲得相關的 Object。以下為使用 npm 安裝的範例：

1. 在 vuex 中用 import 的形式引入，並在建立新的 Vuex Instance 時將這個套件包含進去即可

// 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']
    })]
})

// 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 的狀態改動時，才會同步保存下來。

import {
    storedVuex
} from '@/store'

const i18n = createI18n({
    ......,
    locale: storedVuex ? storedVuex.selectedLanguage : defaultLocale
})

export default i18n