vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解

更新時間：2022年03月30日 10:08:18 作者：JackieDYH

這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

數(shù)據(jù)持久化vuex-persistedstate使用

vuex是在中大型項目中必不可少的狀態(tài)管理組件，刷新會重新更新狀態(tài)，但是有時候我們并不希望如此。例如全局相關(guān)的，如登錄狀態(tài)、token、以及一些不常更新的狀態(tài)等，我們更希望能夠固化到本地，減少無用的接口訪問，以及更佳的用戶體驗。

安裝起步

npm i vuex-persistedstate --save

目前的環(huán)境版本：

"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuex": "^3.4.0",
"vuex-persistedstate": "^3.0.1",

vuex已經(jīng)升級到了3，看了release note沒有發(fā)現(xiàn)太過分的升級，預計不會出現(xiàn)不兼容的情況，有感興趣的小伙伴可以升級體驗一下。

配置使用

在vuex初始化時候，作為組件引入。

import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
? ? // ...
? ? plugins: [persistedState()]
})

自定義存儲方式

vuex-persistedstate默認使用localStorage來固化數(shù)據(jù)，一些特殊情況要如何應(yīng)對呢？（如：safari的無痕瀏覽模式）

需要使用sessionStorage的情況

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

使用cookie的情況

import persistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'
export default new Vuex.Store({
? // ...
? plugins: [
? ? persistedState({
? ? ? storage: {
? ? ? ? getItem: key => Cookies.get(key),
? ? ? ? setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
? ? ? ? removeItem: key => Cookies.remove(key)
? ? ? }
? ? })
? ]
})

想使用cookie同理

默認持久化所有state

指定需要持久化的state,配置如下

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
? // ...
? plugins: [createPersistedState({
? ? ? storage: window.sessionStorage,
? ? ? reducer(val) {
? ? ? ? ? return {
? ? ? ? ? // 只儲存state中的assessmentData
? ? ? ? ? assessmentData: val.assessmentData
? ? ? ? }
? ? ?}
? })]

vuex引用多個插件的寫法

譬如：vuex提示的插件和持久化的插件一起使用，配置如下

import createPersistedState from "vuex-persistedstate"
import createLogger from 'vuex/dist/logger'
// 判斷環(huán)境 vuex提示生產(chǎn)環(huán)境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
? storage: window.sessionStorage
})
export default new Vuex.Store({
?// ...
? plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})

plugins要是一個一維數(shù)組不然會解析錯誤

使用vuex-persistedstate插件遇到的問題

這是一個做持久化的插件:vuex-persistedstate

我在做項目時,遇到一個問題,就是做下面這個功能,渲染數(shù)據(jù)的時候,因為這個數(shù)據(jù)好多個地方使用,所以呢,把它存到了vuex里面。vuex 是將數(shù)據(jù)存到了瀏覽器的內(nèi)存中,刷新就沒了

這行代碼是寫在vuex里面的,就是說,我直接從本地去拿數(shù)據(jù)

list: JSON.parse(window.localStorage.getItem('abc')).category.list || []

直接看下代碼: 我一開始是這樣想的,既然我vuex中有數(shù)據(jù)了,不用計算屬性行不行,直接渲染,確實可以渲染,但是品牌這一項咋渲染呢,push行不通啊,那就只能把結(jié)構(gòu)寫死,但是頁面效果就不對了,所以這個地方用計算屬性,第一,動態(tài)的取到前兩項,第二,可以動態(tài)的添加新的 li 結(jié)構(gòu)。

計算屬性使用的場景：有數(shù)據(jù)啦，但不是我想要的格式，要加工加工

 setup () {
    const brand = reactive({
      id: 'brand',
      name: '品牌',
      children: [{ id: 'brand-children', name: '品牌推薦' }]
    })
    const store = useStore()
    const cateList = computed(() => {
      const list = store.state.category.list.map(item => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.slice(0, 2)
        }
      })
      list.push(brand)
      return list
    })
    return { cateList }
  }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: