解決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]
})

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