在nuxt使用vueX代替storage的实现方案

 更新时间:2023年10月11日 10:29:50   作者:fireInMapleForest  
这篇文章主要介绍了在nuxt使用vueX代替storage的实现方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

使用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中拿到了值。

搬迁大业不易啊,继续努力!!!

打开新窗口后,数值回归初始值的问题

这是今天在搬迁代码的时候发现另一个问题,正常情况下页面路由跳转都在同一窗口。

但是也有一些另外的情况,比如通过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));
	}
}

总结

以上为个人经验,该方式只是个人项目中能够实现,不保证广泛性,仅作参考!希望大家多多支持脚本之家。

相关文章

  • Vue电商网站首页内容吸顶功能实现过程

    Vue电商网站首页内容吸顶功能实现过程

    电商网站的首页内容会比较多,页面比较长,为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见,所以需要一个吸顶导航的效果。目标:完成头部组件吸顶效果的实现
    2023-04-04
  • vue-cli + sass 的正确打开方式图文详解

    vue-cli + sass 的正确打开方式图文详解

    本文通过图文并茂的形式给大家介绍了vue-cli + sass 的正确打开方式,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2017-10-10
  • vuex如何重置所有state(可定制)

    vuex如何重置所有state(可定制)

    在正式场景中我们经常遇到一个问题,就是登出页面或其他操作的时候,我们需要重置所有的vuex,让其变为初始状态,那么如何重置呢,下面就跟随小编一起来了解一下
    2019-01-01
  • Vue ECharts实现机舱座位选择展示功能代码详解

    Vue ECharts实现机舱座位选择展示功能代码详解

    这篇文章主要介绍了Vue ECharts实现机舱座位选择展示,本文给大家分享一段简短的代码通过效果图展示给大家介绍的非常明白,需要的朋友可以参考下
    2022-05-05
  • Vue的生命周期操作示例

    Vue的生命周期操作示例

    这篇文章主要介绍了Vue的生命周期操作,结合实例形式分析了vue生命周期中各个函数的运行步骤,需要的朋友可以参考下
    2019-09-09
  • Vue刷新修改页面中数据的方法

    Vue刷新修改页面中数据的方法

    今天小编就为大家分享一篇Vue刷新修改页面中数据的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue中关于template报错等问题的解决

    vue中关于template报错等问题的解决

    这篇文章主要介绍了vue中关于template报错等问题的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue 使用 vue-pdf 实现pdf在线预览的示例代码

    vue 使用 vue-pdf 实现pdf在线预览的示例代码

    这篇文章主要介绍了vue 使用 vue-pdf 实现pdf在线预览的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • 在Vue中使用Echarts+封装

    在Vue中使用Echarts+封装

    这篇文章主要介绍了在Vue中使用Echarts++封装,需要的朋友可以参考下
    2023-11-11
  • vue绑定的点击事件阻止冒泡的实例

    vue绑定的点击事件阻止冒泡的实例

    下面小编就为大家分享一篇vue绑定的点击事件阻止冒泡的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论