使用vuex代替本地緩存storage

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

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

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

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

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

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

//經(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 直接寫(xiě)出 xxx.js 就是模塊了。

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

3、action 需要自己寫(xiě)，默認(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
}

獲取更改的方式還是沒(méi)變

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

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

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

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

nuxt中刷新頁(yè)面后防止store值丟失

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

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

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

//離開(kāi)頁(yè)面 刷新前 將store中的數(shù)據(jù)存到session
    window.addEventListener('beforeunload', ()=> {
        sessionStorage.setItem("storeCache",JSON.stringify(ctx.store.state))
    });
    //頁(yè)面加載完成  將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ù)努力?。?！

打開(kāi)新窗口后，數(shù)值回歸初始值的問(wèn)題

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

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

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

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

在我第一次登陸的時(shí)候，跳轉(zhuǎn)打開(kāi)新窗口，此時(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)論