Vuex持久化外掛-解決重新整理資料消失的問題

holly發表於2018-08-02
Vue持久化

vuex可以進行全域性的狀態管理，但重新整理後重新整理後資料會消失，這是我們不願意看到的。怎麼解決呢，我們可以結合本地儲存做到資料持久化，也可以通過外掛-vuex-persistedstate。

歡迎來點點我的個人部落格

Vuex持久化外掛-解決重新整理資料消失的問題

1.手動利用HTML5的本地儲存

方法

  • vuex的state在localStorage或sessionStorage或其它儲存方式中取值
  • 在mutations,定義的方法裡對vuex的狀態操作的同時對儲存也做對應的操作。

這樣state就會和儲存一起存在並且與vuex同步

問題

  • 最直觀的就是，手動寫比較麻煩。

2.利用vuex-persistedstate外掛

外掛的原理其實也是結合了儲存方式,只是統一的配置就不需要手動每次都寫儲存方法

使用方法

  • 安裝
npm install vuex-persistedstate  --save
複製程式碼

  • 引入及配置

    在store下的index.js中

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})
複製程式碼

預設儲存到localStorage

想要儲存到sessionStorage，配置如下

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

想使用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'
// 判斷環境 vuex提示生產環境中不使用
const debug = process.env.NODE_ENV !== 'production'
const createPersisted = createPersistedState({
  storage: window.sessionStorage
})
export default new Vuex.Store({
 // ...
  plugins: debug ? [createLogger(), createPersisted] : [createPersisted]
})
複製程式碼

plugins要是一個一維陣列不然會解析錯誤

補充： 同時使用多個儲存方式（譬如一些使用sessionStorage一些使用localStorage）

看github上的文件發現沒有直接可以這樣使用的方式，所以我採用建立多個例項的方式,如下

const createPersisted = createPersistedState({
  storage: window.sessionStorage,
  // 移除sessionState儲存的device
  reducer: (vuexState) => {
    let sessionState = Object.assign({}, vuexState)

    for (let key in sessionState) {
      if (key === 'device') {
        delete sessionState[key]
      }
    }
    return sessionState
  }
})
const createStorage = createPersistedState({
  key: 'vuexStorage',
  storage: window.localStorage,
  reducer: (vuexState) => {
  // localStorage只儲存device資訊
    return vuexState.device
  }
})

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
    device
  },
  strict: debug,
  plugins: debug ? [createLogger(), createStorage, createPersisted] : [createStorage, createPersisted]
})
複製程式碼
  • reducer: function 返回需要儲存的state物件

刪除儲存內容

有個思路是：寫一個mutaition方法，做的事是將所有state製為初始值

點選跳轉外掛GITHUB地址

相關文章