我们有时候在项目中储存的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到了浏览器中后再加载运行