前言：
我们有时候在项目中储存的store数据只要一刷新页面，数据就被清空了，在其他页面加载的时候就获取不到数据了，但是咱们又没有办法控制用户不允许刷新页面，所以咱们来解决了它，解决思路就是利用浏览器的本地存储，localStorage或者sessionStorage，监听页面要离开或者刷新前，将store储存到本地，下次进入页面的时候取出来重新赋值给store就可以了，代码开发步骤如下：
第一步：
我们在plugins文件中建立一个store-cache.js文件，在store-cache.js中添加以下代码：
1 2 3 4 5 6 7 8 9 10 11 12 | 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添加进去，如下：
1 2 3 | plugins: [ {src:'~/plugins/store-cache',ssr:false} ], |
注意：
在添加的时候ssr一定要设置成false，ssr的作用是控制该文件是否在服务器端进行加载，如果设置为true的话，这个js文件就会在服务器中直接运行了，但是因为我们的js文件中需要用到windows对象，windows对象只有在客户端，也就是咱们的浏览器中才会存在，直接在服务器中运行的话，会报错，因为找不到windows对象，所以我们需要设置为false，让该js到了浏览器中后再加载运行