快捷導(dǎo)航

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

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

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

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

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

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

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

然后在進(jìn)入到created生命周期時(shí)，去到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() {
    // 頁面加載時(shí)，讀取sessionStorage中的狀態(tài)信息
    if(sessionStorage.getItem("store")) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))))
    }
    // 在頁面刷新時(shí)，將vuex中的信息保存到sessionStorage里
    window.addEventListener("beforeunload", () => {
      sessionStorage.setItem("store", JSON.stringify(this.$store.state))
    })
  },

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

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

推薦使用 vuex-persistedstate 插件

使用方法

如下：

1、在項(xiàng)目中安裝該插件

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, // 默認(rèn)位置是 localStorage
	    reducer: (state) => {
	      return {
	        // 默認(rèn)是全部緩存，在這里可以設(shè)置需要緩存的狀態(tài)
	        token: state.token
	      }
	    }
	  })],
	  state: {
	    token: ''
	  },
	  mutations: {
	  },
  }

優(yōu)點(diǎn)：

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

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