Nuxt3使用pinia并持久化处理，同时配置自动引入自定义的仓库store模块

前言

需要注意的是，我们的pinia仓库持久化操作只有在客户端渲染时操作才能触发，比如当第一次访问页面时，你可能直接在setup中给仓库存储内容，这是无效的，我们需要保证在客户端渲染时触发才行，比较好的办法就是在onMounted生命钩子中触发。

究其原因就是服务端是没法操作local、cookie这些浏览器配置，而在setup中的代码，是会在服务端也运行的，这就可能导致部分代码到了客户端不再运行。

教程

安装依赖

pnpm i @pinia/nuxt @pinia-plugin-persistedstate/nuxt

安装成功后在nuxt.config.ts中配置模块：

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt'
  ],
})

补充：在一些旧的文章中，你可能会看到通过自定义一个nuxt插件，通过nuxtApp上下文挂载的$pinia对象，引入非nuxt版的pinia-plugin-persistedstate插件，通过：

nuxtApp.$pinia.use(piniaPluginpersistedstate);

这种形式来注册持久化插件，但是现在已经不需要这样了，甚至@pinia-plugin-persistedstate/nuxt自己就搞定了use注册，我们只需要在modules中输入需要使用的模块即可。

全局配置持久化

这个具体可以看下文档，我这里放个我自己的示例：

// nuxt.config.js
export default defineNuxtConfig({
  modules: [
    '@pinia/nuxt',
    '@pinia-plugin-persistedstate/nuxt'
  ],
  piniaPersistedstate: {
    cookieOptions: {
      maxAge: 2 * 365 * 24 * 60 * 60 * 1000
    },
    storage: 'localStorage'
  }
})

maxAge就是cookie过期时间，一般持久化默认都是2年。当然还有的是用expires属性配置过期时间，但是它要求是一个Date对象，挺麻烦的，还是maxAge方便，传数字就行。

storage表示默认使用的存储库，当然你可以在对应的pinia仓库模块中单独再指定，单独指定的权重高于全局。

创建一个自定义仓库模块

在项目根目录创建：stores/test/index.ts

可以看到我嵌套了一个test目录，因为有时候仓库的数据类型太复杂，我会单独创建一个stores/test/types.ts类型文件，专门存放对应的类型。

接着在index中填写内容：

export const useTestStore = defineStore("test", () => {
    const name = ref("");
    function setName(val:string) {
      name.value = val;
    }

    return {
      name,
      setName
    }
  }, 
  {
    persist: true
  }
)

persist: true表示启用持久化。

可以看到我的代码中没有显式书写import defineStore这个方法，原因是因为模块@pinia/nuxt自己实现了自动引入该方法，所以我们可以省略不写，如果defineStore方法名冲突了，还可以在配置中重命名，具体自己去看该模块的文档。

自动引入仓库模块

仓库创建好后，我们引入这个仓库就不得不和以前写法一样：

import { useTestStore } from "@/stores/test";

还挺麻烦的，转念一想，nuxt不是提供了强大的自动引入功能，完全可以用起来啊，于是我们找到nuxt.config.ts文件，添加以下内容：

// nuxt.config.js
export default defineNuxtConfig({
  imports: {
    dirs: ["stores/**/index.{ts,js,mjs,mts}"]
  },
})

然后我们就可以不需要import 引入就能使用了，非常方便。