解決Vuex刷新頁面數據丟失問題 ---- vuex-persistedstate持久化數據

 

何爲Vuex？用處是什麼？爲何刷新丟失？

1. Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化 --官方回答
2. 組件化開發做爲先後端分離模式的一大特色但也伴隨組件之間的通訊的問題，當項目龐大、數據共享場景多、多層組件通訊時，這時它就應該出現了，它爲開發者提供簡便的數據共享中心，不用再去糾結組件之間怎麼傳遞數據了
3. 刷新頁面數據沒了，咋那麼怪異？？？做爲共享數據管理，不該該是一直存在的麼？剛開始時至少我是這樣認爲的！隨着翻閱資料發現就應該是這結果，要是刷新頁面數據不丟失就不正常了；由於咱們JS的數據都是保存在瀏覽器的堆棧內存裏面的，假若刷新頁面數據不丟失，那堆棧裏的數據什麼時候消失呢，項目一大所有數據都保留在瀏覽器堆棧，瀏覽器不炸不卡死科學麼？有那麼大內存的瀏覽器麼？刷新瀏覽器頁面，之前堆棧申請的內存被釋放！這就是瀏覽器的運行機制。想通JS運行機制時，發現一些都能理解了。

頁面刷新數據丟失既然是正常現象，那考慮的就應該是如何持久化數據了。

1. 手動使用localStorage、sessionStorage就能夠了；
2. 既然用了Vuex那確定就要用它相關的插件去實現嘛，這才說得過去，Vuex有2個插件去持久化數據：
   • vuex-persistedstate （接下來要講的） 官鏈 https://www.npmjs.com/package/vuex-persistedstate
   • vuex-persist

我項目用的是vuex-persistedstate 因此就來說講這插件的用法了

1.如何引入這裏就不說了，詳情看上面官方連接

2.在咱們使用Vuex的地方index.js裏引入 我這沒有區分開 state 和 mutations 寫在一個文件裏

import Vue from 'vue'
import Vuex from 'vuex'
import actions from './actions'
import CreatePersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

const state = {
  // loading
  showHttpLoading: false,
  // 用戶code
  userCode: '',
  // unionId
  unionId: ''
}

const mutations = {
  // loading
  UPDATE_SHOW_HTTP_LOADING (_state, val) {
    _state.showHttpLoading = val
  },
  // 保存 code
  SAVE_USER_CODE (_state, val) {
    _state.userCode = val
  },
  // 保存 unionId
  SAVE_USER_UNIONID (_state, val) {
    _state.unionId = val
  }
}

// vuex-persistedstate默認持久化全部state 若不須要所有則把須要持久化的數據放到reducer裏 好比 showHttpLoading、unionId 須要持久化 userCode不須要則不須要加入
const vuexPersisted = new CreatePersistedState({
  key: 'VuexPersisted',
  storage: window.sessionStorage, # // 可選擇 localStorage、sessionStorage、cookie 看需求 
  reducer: state => ({
    // loading
    showHttpLoading: state.showHttpLoading,
    // unionId
    unionId: state.unionId,
  })
})

// 向外暴露store對象
export default new Vuex.Store({
  state,
  mutations,
  actions,
  plugins: [vuexPersisted]
})

若是此刻想配置多個選項，將plugins寫成一個一維數組，否則會報錯

import CreatePersistedState from 'vuex-persistedstate'
import createLogger from 'vuex/dist/logger'
export default new Vuex.Store({
  state,
  mutations,
  actions,
  plugins: [createLogger(), createPersisted]
})

結語： 用問題、或有不對之處環歡迎留言