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组件定义，全局、局部组件，配合模板及动态组件功能,结合实例形式分析了vue.js中组件的定义、全局组件、局部组件、配合模板组件及动态组件的相关使用方法与操作注意事项,需要的朋友可以参考下2019-03-03
这篇文章主要为大家详细介绍了vue在table表中悬浮显示数据及右键菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue中emit事件无法触发的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
vue不允许在已经创建的实例上动态添加新的根级响应式属性,不过可以使用Vue.set()方法将响应式属性添加到嵌套的对象上,下面这篇文章主要给大家介绍了关于vue中Vue.set()的使用以及对其进行深入解析的相关资料,需要的朋友可以参考下2023-01-01
这篇文章主要为大家整理了7个很棒的Vue开发技巧，可以帮助大家更好的理解和使用vue框架。文中的示例代码讲解详细，感兴趣的可以了解一下2023-02-02
vue使用css-rcurlyexpected等less报错问题
这篇文章主要介绍了vue使用css-rcurlyexpected等less报错问题，具有很的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
react在中后台项目中由于在处理复杂的业务逻辑或组件的复用问题比vue优雅而被人认可，但也更需要团队技术整体比较给力，领头大佬的设计与把关能力要更优秀，因此开发成本更大，下面文章就来详细介绍,需要的朋友可以参考下2021-09-09
本篇文章主要介绍了浅谈Vue下使用百度地图的简易方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
浅析vue-router jquery和params传参(接收参数)$router $route的区别
今天做项目时踩到了vue-router传参的坑（jquery和params），所以决定总结一下二者的区别。感兴趣的朋友跟随脚本之家小编一起看看吧2018-08-08
vue中使用Cesium加载shp文件、wms服务、WMTS服务问题
这篇文章主要介绍了vue中使用Cesium加载shp文件、wms服务、WMTS服务问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
最新评论