nuxt中刷新页面后防止store值丢失问题

 更新时间:2023年10月11日 09:55:40   作者:古墩古墩  
这篇文章主要介绍了nuxt中刷新页面后防止store值丢失问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

nuxt刷新页面后防止store值丢失

配置插件()

plugins: [
    {src:'~/plugins/storeCache',ssr: false},
  ],

注意:

要禁止服务端运行,不然会报错,这个事件是在客户端添加的,不是在服务端小渲染的时候添加的。

在plugins/storeCache.js

写代码,如下。

export default function(ctx){
    //离开页面 刷新前 将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));
        }
    });
}

大功告成~

nuxt——让store持久化,刷新页面不清除store

我们有时候在项目中储存的store数据只要一刷新页面,数据就被清空了,在其他页面加载的时候就获取不到数据了,但是咱们又没有办法控制用户不允许刷新页面,所以咱们来解决了它

解决思路

就是利用浏览器的本地存储,localStorage或者sessionStorage,监听页面要离开或者刷新前,将store储存到本地,下次进入页面的时候取出来重新赋值给store就可以了

代码开发步骤

如下:

第一步:

我们在plugins文件中建立一个store-cache.js文件,在store-cache.js中添加以下代码:

export default function(ctx) {
? //离开页面 刷新前 将store中的数据存到localStorage
? window.addEventListener('beforeunload', () => {
? ? localStorage.setItem("storeCache", JSON.stringify(ctx.store.state))
? });
? // 获取localStorage中的store数据
? let storeCache = localStorage.getItem("storeCache")
? if (storeCache) {
? ? // 将localStorage中的store数据替换到store中
? ? ctx.store.replaceState(JSON.parse(storeCache));
? }
}

第二步:

在nuxt.cofing.js中的plugins中将刚才创建的store-cache.js添加进去,如下:

plugins: [
?? ?{src:'~/plugins/store-cache',ssr:false}
],

注意:

在添加的时候ssr一定要设置成false,ssr的作用是控制该文件是否在服务器端进行加载,如果设置为true的话,这个js文件就会在服务器中直接运行了,但是因为我们的js文件中需要用到windows对象,windows对象只有在客户端,也就是咱们的浏览器中才会存在,直接在服务器中运行的话,会报错,因为找不到windows对象,所以我们需要设置为false,让该js到了浏览器中后再加载运行

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue+elementUi中的table实现跨页多选功能(示例详解)

    vue+elementUi中的table实现跨页多选功能(示例详解)

    最近在开发工业品超市的后台系统,遇到一个需求,就是实现在一个table表格中多选数据,在网上查了好多,有些方法真的是无语,下面通过本文给大家分享vue+elementUi中的table实现跨页多选功能,感兴趣的朋友跟随小编一起看看吧
    2024-05-05
  • Vue3.2+Ts组件之间通信的实现

    Vue3.2+Ts组件之间通信的实现

    本文主要介绍了Vue3.2+Ts组件之间通信的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 快速解决vue动态绑定多个class的官方实例语法无效的问题

    快速解决vue动态绑定多个class的官方实例语法无效的问题

    今天小编就为大家分享一篇快速解决vue动态绑定多个class的官方实例语法无效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue.js中v-on指令的用法介绍

    Vue.js中v-on指令的用法介绍

    这篇文章介绍了Vue.js中v-on指令的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

    VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)

    使用uniapp开发微信小程序时,多多少少会遇到获取当前位置的详细信息,下面这篇文章主要给大家介绍了关于VUE中如何调用高德地图获取当前位置(VUE2.0和3.0通用)的相关资料,需要的朋友可以参考下
    2023-04-04
  • 5分钟学会Vue动画效果(小结)

    5分钟学会Vue动画效果(小结)

    这篇文章主要介绍了5分钟学会Vue动画效果(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 详解如何理解vue的key属性

    详解如何理解vue的key属性

    这篇文章主要介绍了详解如何理解vue的key属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue.js实现表格渲染的方法

    Vue.js实现表格渲染的方法

    今天小编就为大家分享一篇对Vue.js实现表格渲染的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue前端如何向后端传递参数

    vue前端如何向后端传递参数

    这篇文章主要介绍了vue前端如何向后端传递参数,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue-cli3在main.js中console.log()会报错的解决

    vue-cli3在main.js中console.log()会报错的解决

    这篇文章主要介绍了vue-cli3在main.js中console.log()会报错的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论