Nuxt.js做Vuex数据持久化

Vue安夏

已于 2023-05-12 17:07:47 修改

阅读量497

点赞数 3

文章标签： javascript 前端

于 2023-05-12 17:04:12 首次发布

本文链接：https://blog.csdn.net/FitnessSnail/article/details/130646101

版权

文章介绍了Vuex中数据在页面刷新时会丢失的原因，因为Vuex的数据存储在运行内存中。为了解决这个问题，提出了将Vuex的状态存储到localStorage中，通过监听页面卸载事件保存数据，并在页面加载时恢复数据，从而实现数据持久化。

摘要由CSDN通过智能技术生成

一. 数据丢失的原因

vuex存储的数据只是在页面中，相当于全局变量，页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。
因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被重新赋值。

二 . 解决方法

这里将Vuex的数据存储到localStorage中，具体看下面代码

1. 在plugins.js文件中创建 store-cache.js

2. 在nuxt.config.js 中代码如下

  plugins: [
     { src: '~/plugins/store-cache', ssr: false },
  ],

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(Object.assign({},ctx.store.state,JSON.parse(storeCache))
      )
  }
}

这样就解决了Vuex刷新数据丢失的问题了，实现了数据持久化