pinia
@pinia/nuxt

您会喜欢使用的 Vue 存储

@pinia/nuxt

用于 Pinia 的 Nuxt 模块

自动安装

使用 nuxi 将此模块自动添加到您的 Nuxt 项目中

npx nuxi@latest module add pinia

手动安装

将依赖项添加到您的 Nuxt 项目中

npm i pinia @pinia/nuxt

nuxt.config.ts 中启用 @pinia/nuxt 模块

export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],
})

配置模块

默认情况下,此模块会将 stores 文件夹添加到自动导入中,您可以在其中统一组织与 Pinia store 相关的代码。

!提示 在 Nuxt 4 引入的新目录结构中,该目录为 app/stores

您可以在 nuxt.config.ts 中使用 pinia 属性来自定义此行为

export default defineNuxtConfig({
    modules: ['@pinia/nuxt'],
    // configure the module using `pinia` property
    pinia: {
      /**
       * Automatically add stores dirs to the auto imports. This is the same as
       * directly adding the dirs to the `imports.dirs` option. If you want to
       * also import nested stores, you can use the glob pattern `./stores/**`
       * (on Nuxt 3) or `app/stores/**` (on Nuxt 4+)
       *
       * @default `['stores']`
       */
        storesDirs: []
    }
})

许可证

MIT