Vuex是在中大型項(xiàng)目中必不可少的狀態(tài)管理組件，刷新會(huì)重新更新?tīng)顟B(tài)，但是有時(shí)候我們并不希望如此。例如全局相關(guān)的，如登錄狀態(tài)、token、以及一些不常更新的狀態(tài)等，我們更希望能夠固化到本地，減少無(wú)用的接口訪問(wèn)，以及更佳的用戶(hù)體驗(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ì)丟失。

手動(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)寫(xiě)比較麻煩

利用vuex-persistedstate插件

vuex可以進(jìn)行全局的狀態(tài)管理，但刷新后刷新后數(shù)據(jù)會(huì)消失，這是我們不愿意看到的。怎么解決呢，我們可以結(jié)合本地存儲(chǔ)做到數(shù)據(jù)持久化，也可以通過(guò)插件vuex-persistedstate

插件的原理其實(shí)也是結(jié)合了存儲(chǔ)方式,只是統(tǒng)一的配置就不需要手動(dòng)每次都寫(xiě)存儲(chǔ)方法

安裝

npm install vuex-persistedstate --save
// 或
npm i -S vuex-persistedstate

配置使用

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

// 在store下的index.js中
import persistedState from 'vuex-persistedstate'
export default new Vuex.Store({
    // ...
    plugins: [persistedState()]
})

vuex-persistedstate默認(rèn)使用localStorage來(lái)固化數(shù)據(jù)（默認(rèn)存儲(chǔ)于localStorage）

• 存儲(chǔ)sessionStorage的情況（safari的無(wú)痕瀏覽模式）

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

• 存儲(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)
      }
    })
  ]
})

默認(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è)插件的寫(xiě)法

譬如：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ò)誤

API

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

• key ： 存儲(chǔ)持久狀態(tài)的鍵。
  默認(rèn)：vuex

• paths ： 部分持續(xù)狀態(tài)的任何路徑的數(shù)組。如果沒(méi)有路徑給出，完整的狀態(tài)是持久的。
  默認(rèn)：[]

• reducer ： 一個(gè)函數(shù)，將被調(diào)用來(lái)基于給定的路徑持久化的狀態(tài)。
  默認(rèn)：都包含這些值

• subscriber ： 一個(gè)被調(diào)用來(lái)設(shè)置突變訂閱的函數(shù)。
  默認(rèn)：store => handler => store.subscribe(handler)

• storage ： 而不是（或與）getState和setState。
  默認(rèn)：localStorage

• getState ： 將被調(diào)用以重新水化先前持久狀態(tài)的函數(shù)。
  默認(rèn)：storage

• setState ： 將被調(diào)用來(lái)保持給定狀態(tài)的函數(shù)。
  默認(rèn)：storage

• filter ： 將被調(diào)用來(lái)過(guò)濾將setState最終觸發(fā)存儲(chǔ)的任何突變的函數(shù)。
  默認(rèn)：() => true