Nuxt 3中Pinia Store持久化失效，配置是否存在问题？

1. 修复Nuxt配置文件的语法错误 #

你的nuxt.config中@pinia-plugin-persistedstate/nuxt模块缺少引号，导致配置无效，修正后如下：

// nuxt.config
export default defineNuxtConfig({
  modules: [
    [
      "@pinia/nuxt",
      {
        autoImports: ["defineStore", "acceptHMRUpdate"],
      },
    ],
    "@pinia-plugin-persistedstate/nuxt", // 补全缺失的引号
  ],
})

2. 修正Store中的持久化配置 #

你在store中使用的persistedState.localStorage未导入，会导致persistedState未定义错误。在Nuxt3集成该插件后，可直接使用简化配置：

// test-store
export const useTestStore = defineStore("test-store", {
  state: () => ({
    hello: "there"
  }),
  persist: true, // 启用默认持久化（默认使用localStorage）
  // 如需自定义配置，正确写法为：
  // persist: {
  //   storage: localStorage,
  // }
});

3. 验证持久化状态 #

修改状态后，打开浏览器开发者工具的Application面板，查看localStorage中是否存在以pinia开头的键值对，确认状态已被成功存储。

另外，页面跳转建议使用Nuxt内置的<NuxtLink>组件，避免原生a标签触发的硬刷新影响状态读取。

内容的提问来源于stack exchange，提问作者ahmadafiquddin