在nuxt使用vueX代替storage的实现方案
作者：fireInMapleForest
使用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的数据获取不到了
这样不行，只能继续想办法了，然后通过百度大法还真让我找到了
按照这个我又开始了我的搬迁大业，结果发现这个值只能在页面彻底加载后才生效
这样导致我在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中拿到了值。
搬迁大业不易啊，继续努力！！！
打开新窗口后，数值回归初始值的问题
这是今天在搬迁代码的时候发现另一个问题，正常情况下页面路由跳转都在同一窗口。
但是也有一些另外的情况，比如通过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));
}
}总结
以上为个人经验，该方式只是个人项目中能够实现，不保证广泛性，仅作参考！希望大家多多支持脚本之家。