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到了浏览器中后再加载运行

总结

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

您可能感兴趣的文章:

使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
这篇文章主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
Vue各种loader的基本配置与使用示例教程
这篇文章主要介绍了Vue 各种loader的基本配置与使用，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
Vue编译报错内存溢出问题解决方式
这篇文章主要为大家介绍了Vue编译报错内存溢出问题解决方式,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-08-08
Vue使用高德地图实现城市定位
这篇文章主要为大家详细介绍了Vue使用高德地图实现城市定位，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
详解nuxt sass全局变量(公共scss解决方案)
这篇文章主要介绍了详解nuxt sass全局变量(公共scss解决方案)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue-cli项目优化方法- 缩短首屏加载时间
这篇文章主要介绍了vue-cli项目优化缩短首屏加载时间,需要的朋友可以参考下
2018-04-04
详解Vue组件如何正确引用和使用外部方法
在开发Vue应用时,我们经常需要在多个组件中复用一些通用的函数或方法,这些函数可能是我们自己编写的工具函数,也可能是从第三方库中导入的,下面我们就来看看如何正确引用和使用外部方法吧
2024-01-01
Vue3中vue-router的使用方法详解
Vue Router 是 Vue 的官方路由，它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举，本文将通过简单的示例为大家介绍一下vue-router的使用，需要的可以参考一下
2023-06-06
Vue3表单组件el-form校验规则rules属性示例详解
在el-form中正确使用rules校验是非常重要的,rules使用不当容易出现规则不生效、规则一直被触发等各种现象,这篇文章主要给大家介绍了关于Vue3表单组件el-form校验规则rules属性的相关资料,需要的朋友可以参考下
2024-08-08
详解如何使用Vue实现图像识别和人脸对比
随着人工智能的发展，图像识别和人脸识别技术已经被广泛应用于各种应用程序中，Vue为我们提供了许多实用工具和库，可以帮助我们在应用程序中进行图像识别和人脸识别，在本文中，我们将介绍如何使用Vue进行图像识别和人脸对比,需要的朋友可以参考下
2023-06-06