首页 > 其他 > 详细

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

时间:2021-07-22 11:16:42      阅读:12      评论:0      收藏:0      [点我收藏+]

原文地址

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

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

原文:https://www.cnblogs.com/big0range/p/15042656.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!