在nuxt使用vueX代替storage的方案_在nuxt框架中,header组件使用了sessionstorage-优快云博客

使用vuex代替本地缓存storage

今天搬项目时，发现页面中有使用sessionStorage做缓存便于各页面使用，但是搬到nuxt结构下却报错了，查询发现是由于在vue-nuxt中是没办法使用window和document，所以本地缓存也会出问题。因此只能找替代方案，于是想到了vueX（原本项目是没有用的）；

参照Nuxt使用Vuex将基础store写完了，结果却发现页面报错了：Classic mode for store/ is deprecated and will be removed in Nuxt 3.没办法继续祭出百度大法，发现是 vuex经典模式写法将在Nuxt 3中删除。在nuxt不需要按照经典模式写了

//经典模式
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

区别在于：
1、不需要 modules 目录，所有 modules 直接写出 xxx.js 就是模块了。
2、index中不需要 vue.use(vuex) 等模板代码了，全部由 nuxt 完成。
3、action 需要自己写，默认 nuxt会自动配置生成。直接调用即可。

//新版示例
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);

到这里基本上完成，当我高高兴兴准备继续时，刷新了下页面，数据没了！！！！

nuxt中页面刷新后原来的vueX的数据获取不到了

这样不行，只能继续想办法了，然后通过百度大法还真让我找到了
nuxt中刷新页面后防止store值丢失

按照这个我又开始了我的搬迁大业，结果发现这个值只能在页面彻底加载后才生效
在这里插入图片描述
这样导致我在mouted生命周期里压根没法实现，哦豁，这就很尴尬了。

后面我想了下我要是不加这个判断会怎么样，想到就干，还真成功了

//离开页面 刷新前 将store中的数据存到session
    window.addEventListener('beforeunload', ()=> {
        sessionStorage.setItem("storeCache",JSON.stringify(ctx.store.state))
    });
    //页面加载完成  将session中的store数据
    // window.addEventListener('load', ()=> {
        let storeCache = sessionStorage.getItem("storeCache")
        if(storeCache){
            // 将session中的store数据替换到store中
            ctx.store.replaceState(JSON.parse(storeCache));
        }
    // });

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

搬迁大业不易啊，继续努力！！！

打开新窗口后，数值回归初始值的问题（2021/1/9新增）

这是今天在搬迁代码的时候发现另一个问题，正常情况下页面路由跳转都在同一窗口。但是也有一些另外的情况，比如通过a标签的_blank属性、window.open(url, ‘_blank’);等方式，重新打开一个窗口；这时我发现，我本来的登录状态信息没有了，缓存里也变成了初始值。

经过调试发现跳转重新打开页面时，部分代码不生效了
在这里插入图片描述
因为这部分保存代码有个前提，离开当前页面或者刷新才会生效，但是我是打开了新窗口，原有的窗口是没有任何变化的，也就是说。在我第一次登陆的时候，跳转打开新窗口，此时得到的数据并不会是最新的登陆之后的信息，而会是初始值。

于是想了想能否使用路由守卫进行判断，只要进行了跳转就保存一次，于是我就干了，我想着把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数据替换到store中
		ctx.store.replaceState(JSON.parse(storeCache));
	}
}

该方式只是个人项目中能够实现，不保证广泛性，以作参考！