Nuxt.js做Vuex数据持久化_nuxt 使用vuex如何数据持久化

一.  数据丢失的原因

• 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刷新数据丢失的问题了，实现了数据持久化