javascript - Nuxt、Vuex 数据在浏览器刷新时清除

Question

我有一个在前端使用 Nuxt 的应用程序。由于 Nuxt 是一种 SSR 技术，因此刷新浏览器后 vuex 存储中的数据将被删除。有没有一种方法可以在刷新浏览器后将 vuex 数据保存并保留在浏览器存储中(最好不是 cookie)？

Answer 1

我们使用 vuex-persist在 indexDB 中保存一些商店信息以提供离线功能(PWA)，但您也可以使用 localstorage 和 cookie。它非常好用并且还有一个 nuxt 实现:

// Inside - nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/vuex-persist', ssr: false }
  ]
}

// ~/plugins/vuex-persist.js
import VuexPersistence from 'vuex-persist'

export default ({ store }) => {
  new VuexPersistence({
  /* your options */
    key: 'vuex', // The key to store the state on in the storage provider.
    storage: window.localStorage, // or window.sessionStorage or localForage 
  }).plugin(store);
}