Nuxt 中的store数据持久化存储(防止Vuex数据刷新丢失)

原文地址

Nuxt 中的store数据持久化存储(防止Vuex数据刷新丢失)

第一步

在根目录plugins文件夹下新建一个store.js(没有plugins的话就自己新建一个)

第二步

export default ({ app }) => {
  // 获取到store
  const store = app.store
  // 获取到session中store数据 有就存入
  if (sessionStorage.getItem('store')) {
    store.replaceState(Object.assign({}, store.state, JSON.parse(sessionStorage.getItem('store'))))
  }
  // 在页面刷新时将vuex里的信息保存到sessionStorage里
  window.addEventListener('beforeunload', () => {
    sessionStorage.setItem('store', JSON.stringify(store.state))
  })
  window.addEventListener('pagehide', () => {
    sessionStorage.setItem('store', JSON.stringify(store.state))
  })
}

第三步

在根目录下=>nuxt.config.js中=>plugins的数组内添加一项{ src: '~/plugins/store.js', ssr: false }

ssr:false的意思是禁止服务端渲染 因为服务端中是没有window的

plugins: [
  { src: '~/plugins/store.js', ssr: false }
]

OK