Nuxt 3 自定义自动导入配置（自动导入 Pinia Store）

当然可以，通过Nuxt 3的自动导入机制，你完全不用每次手动导入Store函数。以下是具体配置步骤：

1. 批量自动导入配置 #

修改项目根目录下的nuxt.config.ts，添加autoImports.dirs配置，指定要自动导入的stores目录：

export default defineNuxtConfig({
  // 确保已启用Pinia模块
  modules: ['@pinia/nuxt'],
  // 配置自定义自动导入
  autoImports: {
    dirs: [
      // 自动导入 stores 目录下所有文件的导出内容
      './stores/**'
    ]
  },
  // 可选：配置Pinia自身的自动导入（比如defineStore）
  pinia: {
    autoImports: ['defineStore']
  }
})

2. 确保Store文件导出格式正确 #

以你的/stores/auth.store.ts为例，需要导出符合命名规范的Store函数：

import { defineStore } from 'pinia'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    // 示例状态
    isLoggedIn: false
  }),
  // 可添加getters、actions等
})

3. 生效方式 #

配置完成后，重启Nuxt开发服务器，之后在任意组件或页面中就可以直接使用useAuthStore()，无需手动导入：

<template>
  <div v-if="authStore.isLoggedIn">已登录</div>
</template>

<script setup>
const authStore = useAuthStore()
// 直接调用，无需写import语句
</script>

进阶：精准控制导入（可选） #

如果不想批量导入整个目录，也可以指定具体的Store函数：

export default defineNuxtConfig({
  modules: ['@pinia/nuxt'],
  autoImports: {
    imports: [
      { from: '~~/stores/auth.store', imports: ['useAuthStore'] },
      { from: '~~/stores/course.store', imports: ['useCourseStore'] }
    ]
  }
})

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