在nuxt使用vueX代替storage的實現(xiàn)方案

更新時間：2023年10月11日 10:29:50 作者：fireInMapleForest

這篇文章主要介紹了在nuxt使用vueX代替storage的實現(xiàn)方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

使用vuex代替本地緩存storage

今天搬項目時，發(fā)現(xiàn)頁面中有使用sessionStorage做緩存便于各頁面使用，但是搬到nuxt結構下卻報錯了，查詢發(fā)現(xiàn)是由于在vue-nuxt中是沒辦法使用window和document，所以本地緩存也會出問題。

因此只能找替代方案，于是想到了vueX（原本項目是沒有用的）；

參照Nuxt使用Vuex將基礎store寫完了，結果卻發(fā)現(xiàn)頁面報錯了：

Classic mode for store/ is deprecated and will be removed in Nuxt 3.

沒辦法繼續(xù)祭出百度大法，發(fā)現(xiàn)是 vuex經(jīng)典模式寫法將在Nuxt 3中刪除。

在nuxt不需要按照經(jīng)典模式寫了

//經(jīng)典模式
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = () => new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    addCounter(state) {
      state.counter++
    }
  }
})
export default store

區(qū)別在于：

1、不需要 modules 目錄，所有 modules 直接寫出 xxx.js 就是模塊了。

2、index中不需要 vue.use(vuex) 等模板代碼了，全部由 nuxt 完成。

3、action 需要自己寫，默認 nuxt會自動配置生成。直接調(diào)用即可。

//新版示例
export  const state = () => ({
	userInfo: null,
	token: null,
})
export const getters = {
  getToken(state){
    return state.token
  },
}
export const mutations = {
  set_userInfo(state, userInfo) {
      state.userInfo = userInfo;
  },
  set_token(state, token) {
      state.token = token;
  },
}
export const actions = {
	//do ajax
}

獲取更改的方式還是沒變

this.$store.state.token;
this.$store.commit('set_token',token);

到這里基本上完成，當我高高興興準備繼續(xù)時，刷新了下頁面，數(shù)據(jù)沒了！?。?！

nuxt中頁面刷新后原來的vueX的數(shù)據(jù)獲取不到了

這樣不行，只能繼續(xù)想辦法了，然后通過百度大法還真讓我找到了

nuxt中刷新頁面后防止store值丟失

按照這個我又開始了我的搬遷大業(yè)，結果發(fā)現(xiàn)這個值只能在頁面徹底加載后才生效

這樣導致我在mouted生命周期里壓根沒法實現(xiàn)，哦豁，這就很尷尬了。

后面我想了下我要是不加這個判斷會怎么樣，想到就干，還真成功了

//離開頁面 刷新前 將store中的數(shù)據(jù)存到session
    window.addEventListener('beforeunload', ()=> {
        sessionStorage.setItem("storeCache",JSON.stringify(ctx.store.state))
    });
    //頁面加載完成  將session中的store數(shù)據(jù)
    // window.addEventListener('load', ()=> {
        let storeCache = sessionStorage.getItem("storeCache")
        if(storeCache){
            // 將session中的store數(shù)據(jù)替換到store中
            ctx.store.replaceState(JSON.parse(storeCache));
        }
    // });

屏蔽掉后我成功在mouted中拿到了值。

搬遷大業(yè)不易啊，繼續(xù)努力?。。?/p>

打開新窗口后，數(shù)值回歸初始值的問題

這是今天在搬遷代碼的時候發(fā)現(xiàn)另一個問題，正常情況下頁面路由跳轉都在同一窗口。

但是也有一些另外的情況，比如通過a標簽的_blank屬性、window.open(url, ‘_blank’);等方式，重新打開一個窗口；這時我發(fā)現(xiàn)，我本來的登錄狀態(tài)信息沒有了，緩存里也變成了初始值。

經(jīng)過調(diào)試發(fā)現(xiàn)跳轉重新打開頁面時，部分代碼不生效了

因為這部分保存代碼有個前提，離開當前頁面或者刷新才會生效，但是我是打開了新窗口，原有的窗口是沒有任何變化的，也就是說。

在我第一次登陸的時候，跳轉打開新窗口，此時得到的數(shù)據(jù)并不會是最新的登陸之后的信息，而會是初始值。

于是想了想能否使用路由守衛(wèi)進行判斷，只要進行了跳轉就保存一次，于是我就干了，我想著把js的代碼進行更換為路由形式，嘗試了幾次終于是成功了

export default ( ctx ) => {
	let toU;
	ctx.app.router.afterEach((to, from) => {
		toU = to;
	})
	if(toU){
		sessionStorage.setItem("storeCache",JSON.stringify(ctx.store.state))
	}
	let storeCache = sessionStorage.getItem("storeCache")
	if(storeCache){
		// 將session中的store數(shù)據(jù)替換到store中
		ctx.store.replaceState(JSON.parse(storeCache));
	}
}