nuxt——让store持久化，刷新页面不清除store

最新推荐文章于 2025-01-19 02:13:12 发布

朕.

最新推荐文章于 2025-01-19 02:13:12 发布

阅读量3.9k

点赞数 2

分类专栏： nuxt.js 文章标签： vue 前端 javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_42326144/article/details/107125536

版权

nuxt.js 专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何在Nuxt.js项目中使用localStorage或sessionStorage来持久化Vuex store的数据，防止页面刷新导致数据丢失。通过监听beforeunload事件，将store状态存储到localStorage，并在页面加载时恢复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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