使用vuex代替本地緩存storage

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

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

參照Nuxt使用Vuex將基礎(chǔ)store寫完了，結(jié)果卻發(fā)現(xiàn)頁面報(bào)錯(cuò)了：

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 需要自己寫，默認(rèn) nuxt會(huì)自動(dòng)配置生成。直接調(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);

到這里基本上完成，當(dāng)我高高興興準(zhǔn)備繼續(xù)時(shí)，刷新了下頁面，數(shù)據(jù)沒了！?。。?/p>

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

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

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

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

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

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

//離開頁面 刷新前 將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ù)值回歸初始值的問題

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

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

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

因?yàn)檫@部分保存代碼有個(gè)前提，離開當(dāng)前頁面或者刷新才會(huì)生效，但是我是打開了新窗口，原有的窗口是沒有任何變化的，也就是說。

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

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

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));
	}
}

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，該方式只是個(gè)人項(xiàng)目中能夠?qū)崿F(xiàn)，不保證廣泛性，僅作參考！希望大家多多支持腳本之家。

最新評(píng)論