vuex數(shù)據(jù)狀態(tài)持久化問題

更新時間：2023年10月10日 09:20:25 作者：前端小白在寫bug

這篇文章主要介紹了vuex數(shù)據(jù)狀態(tài)持久化問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

方法一、瀏覽器監(jiān)聽+本地存儲

我們可以監(jiān)聽瀏覽器的刷新，在頁面刷新時將vuex內(nèi)的數(shù)據(jù)保存在本地存儲中(根據(jù)項目需要可以考慮保存在sessionStorage或者localStorage中)

在App.vue中，created生命周期寫我們的監(jiān)聽方法

window.addEventListener("beforeunload", () => {
    	sessionStorage.setItem("store", JSON.stringify(this.$store.state))
    })

然后在進入到created生命周期時，去到sessionStorage/localStorage中的數(shù)據(jù)，將數(shù)據(jù)替換到vuex中

if(sessionStorage.getItem("store")) {
    	this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }

整體來說明一下代碼

created() {
    // 頁面加載時，讀取sessionStorage中的狀態(tài)信息
    if(sessionStorage.getItem("store")) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在頁面刷新時，將vuex中的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state))
    })
  },

這個方法的好處是不需要借助其他三方組件庫，實現(xiàn)vuex全量數(shù)據(jù)持久化，壞處是所有數(shù)據(jù)保存在本地，會有一些較敏感數(shù)據(jù)容易被查看到，另外如果做某些指定數(shù)據(jù)持久化時會比較麻煩，所以下面介紹第二種更為簡單的方法

方法二、狀態(tài)持久化插件

推薦使用 vuex-persistedstate 插件

使用方法

如下：

1、在項目中安裝該插件

cnpm i --save vuex-persistedstate

2、在 src/store/index.js中引入該插件

import createPersistedState from 'vuex-persistedstate'

在vuex中使用

plugins: [createPersistedState()]

整體代碼

如下：

import Vue from 'vue'
	import Vuex from 'vuex'
	import createPersistedState from 'vuex-persistedstate'
	Vue.use(Vuex)
	export default new Vuex.Store({
	  plugins: [createPersistedState({
	    storage: window.sessionStorage, // 默認位置是 localStorage
	    reducer: (state) => {
	      return {
	        // 默認是全部緩存，在這里可以設(shè)置需要緩存的狀態(tài)
	        token: state.token
	      }
	    }
	  })],
	  state: {
	    token: ''
	  },
	  mutations: {
	  },
  }

優(yōu)點：

1、可以更便捷設(shè)置存儲位置為sessionStorage或者 localStorage中，默認為 localStorage

2、可以更便捷設(shè)置需要存儲的內(nèi)容，如當需要存儲token時，只需要將token放入進入即可