一、說(shuō)明：

Vuex是在中大型項(xiàng)目中必不可少的狀態(tài)管理組件，刷新會(huì)重新更新?tīng)顟B(tài)，但是有時(shí)候我們并不希望如此。例如全局相關(guān)的，如登錄狀態(tài)、token、以及一些不常更新的狀態(tài)等，我們更希望能夠固化到本地，減少無(wú)用的接口訪問(wèn)，以及更佳的用戶體驗(yàn)。
頁(yè)面刷新后，想保存頁(yè)面未保存的數(shù)據(jù)。我們總是習(xí)慣于放在瀏覽器的sessionStorage、localStorage、cookie中。但是用了vue后，vuex便可以被應(yīng)用了。

vuex優(yōu)勢(shì)： 相比sessionStorage，存儲(chǔ)數(shù)據(jù)更安全，sessionStorage可以在控制臺(tái)被看到。
vuex劣勢(shì)： 在F5刷新頁(yè)面后，vuex會(huì)重新更新state，所以，存儲(chǔ)的數(shù)據(jù)會(huì)丟失。(即刷新瀏覽器，vuex數(shù)據(jù)丟失)

二、手動(dòng)利用HTML5的本地存儲(chǔ)：

vuex的state在localStorage或sessionStorage或其它存儲(chǔ)方式中取值 在mutations定義的方法里對(duì)vuex的狀態(tài)操作的同時(shí)對(duì)存儲(chǔ)也做對(duì)應(yīng)的操作。這樣state就會(huì)和存儲(chǔ)一起存在并且與vuex同步

問(wèn)題:最直觀的就是，手動(dòng)寫比較麻煩

三、利用vuex-persistedstate插件

vuex可以進(jìn)行全局的狀態(tài)管理，但刷新后刷新后數(shù)據(jù)會(huì)消失，這是我們不愿意看到的。怎么解決呢，我們可以結(jié)合本地存儲(chǔ)做到數(shù)據(jù)持久化，也可以通過(guò)插件vuex-persistedstate
插件的原理其實(shí)也是結(jié)合了存儲(chǔ)方式,只是統(tǒng)一的配置就不需要手動(dòng)每次都寫存儲(chǔ)方法

【1】安裝

npm install vuex-persistedstate --save

【2】配置使用

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

#在store下的index.js中
import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [createPersistedState ()]
})
#vuex-persistedstate默認(rèn)使用localStorage來(lái)固化數(shù)據(jù)（默認(rèn)存儲(chǔ)于localStorage）

【3】存儲(chǔ)sessionStorage的情況

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [
    createPersistedState({
      storage: window.sessionStorage
    })
  ]
})

【4】存儲(chǔ)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)
      }
    })
  ]
})

【5】默認(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
        }
      }
     })
  ]
})

【6】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ò)誤

【7】 自定義 多種存儲(chǔ)方式 – 配置

四、API

createPersistedState([options])使用給定的選項(xiàng)創(chuàng)建插件的新實(shí)例?？梢蕴峁┮韵逻x項(xiàng)來(lái)配置您的特定需求的插件：

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-702284.html

到了這里，關(guān)于【vue】vuex持久化插件vuex-persistedstate：的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！