原文地址

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