如何为 nuxt.js 实现 vuex 持久化？答案

【问题标题】：How to implement vuex persistence for nuxt.js?如何为 nuxt.js 实现 vuex 持久化？
【发布时间】：2022-01-27 00:05:22
【问题描述】：

Nuxt 版本：2.15.8

我不是用 Vue.use(Vuex) 和 new Vuex.Store 以传统方式初始化 vuex。

相反，我正在使用 nuxt.js 方式，https://typescript.nuxtjs.org/cookbook/store/#basic-typing。

在这种情况下，我不知道如何为状态持久性添加插件。

【问题讨论】：

SO 不是一个操作平台。到目前为止，您尝试了什么，什么不起作用？
另外，除了创建store/index.ts 文件之外，您不必在这里做任何特别的事情。打字是本地的。 Nuxt 会检测到您在 store 中确实有一个文件并为您启用 Vuex。

标签： typescript nuxt.js vuex persistence

【解决方案1】：

这可以通过 vuex-persist 来实现： https://github.com/championswimmer/vuex-persist#tips-for-nuxt

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

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

export default ({ store }) => {
  new VuexPersistence({
  /* your options */
  }).plugin(store);
}

【讨论】：