快捷導(dǎo)航

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

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

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

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

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

安裝起步

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)升級(jí)到了3，看了release note沒有發(fā)現(xiàn)太過分的升級(jí)，預(yù)計(jì)不會(huì)出現(xiàn)不兼容的情況，有感興趣的小伙伴可以升級(jí)體驗(yàn)一下。

配置使用

在vuex初始化時(shí)候，作為組件引入。

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

自定義存儲(chǔ)方式

vuex-persistedstate默認(rèn)使用localStorage來固化數(shù)據(jù)，一些特殊情況要如何應(yīng)對(duì)呢？（如：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同理

默認(rèn)持久化所有state

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

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

vuex引用多個(gè)插件的寫法

譬如：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要是一個(gè)一維數(shù)組不然會(huì)解析錯(cuò)誤

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

這是一個(gè)做持久化的插件:vuex-persistedstate

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

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

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

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

計(jì)算屬性使用的場(chǎng)景：有數(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 }
  }

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

您可能感興趣的文章: