nuxt中刷新页面后防止store值丢失问题
作者：古墩古墩
这篇文章主要介绍了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到了浏览器中后再加载运行
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。