Auto Imports

自动导入

Nuxt 自动导入辅助函数、可组合项和 Vue API 以在您的应用程序中使用，而无需显式导入它们。 基于目录结构，每个 Nuxt 应用程序还可以为其自己的组件、可组合项和插件使用自动导入。 组件、可组合项或插件可以使用这些函数。

与经典的全局声明相反，Nuxt 保留了类型和 IDE 的完成和提示，并且仅包含生产代码中实际使用的内容。

内置自动导入

来自Nuxt

Nuxt 自动导入函数和可组合项以执行数据获取，访问应用程序上下文 和 runtime config，管理 state 或定义组件和插件。

<script setup>
/* useAsyncData() and $fetch() are auto-imported */
const { data, refresh, pending } = await useAsyncData('/api/hello', () => $fetch('/api/hello'))
</script>

来自Vue

Vue 3 公开了 Reactivity API，例如 ref 或 computed，以及由 Nuxt 自动导入的生命周期钩子和帮助程序。

<script setup>
/* ref() and computed() are auto-imported */
const count = ref(1)
const double = computed(() => count.value * 2)
</script>

来自Vue和Nuxt可组合项

当您使用 Vue 和 Nuxt 提供的内置 Composition API 可组合项时，请注意它们中的许多都依赖于在正确的_context_中被调用。

在组件生命周期中，Vue 通过全局变量跟踪当前组件的临时实例(类似地，Nuxt 跟踪 nuxtApp 的临时实例)，然后在同一时间段内取消设置。 这在服务器渲染时是必不可少的，既可以避免交叉请求状态污染(泄漏两个用户之间的共享引用)，也可以避免不同组件之间的泄漏。

这意味着(除了极少数例外)您不能在 Nuxt 插件、Nuxt 路由中间件或 Vue 设置函数之外使用它们。 最重要的是，您必须同步使用它们——也就是说，您不能在调用可组合项之前使用 await，除非在 <script setup> 块内，在使用 defineNuxtComponent 声明的组件的设置函数内，在 defineNuxtPlugin 或在 defineNuxtRouteMiddleware 中，我们执行转换以保持同步上下文，即使在 await 之后。

如果您收到类似Nuxt instance is unavailable的错误消息，那么这可能意味着您在 Vue 或 Nuxt 生命周期的错误位置调用了 Nuxt 可组合项。

请参阅此 评论 中的完整解释。

示例

中断代码示例:

// 尝试在可组合之外访问运行时配置
const config = useRuntimeConfig()

export function useMyComposable() {
  // 在此处访问运行时配置
}

修复错误示例:

export function useMyComposable() {
  // 因为您的可组合项在生命周期中的正确位置被调用，
  // useRuntimeConfig 也可以
  const config = useRuntimeConfig()

  // ...
}

基于目录的自动导入

Nuxt 直接自动导入在定义的目录中创建的文件：

• components/ for Vue components.
• composables/ for Vue composables.
• utils/ for helper functions and other utilities.

显式导入

Nuxt 使用 #imports 别名公开每个自动导入，如果需要，可用于显式导入：

<script setup>
import { computed, ref } from '#imports'

const count = ref(1)
const double = computed(() => count.value * 2)
</script>

禁用自动导入

如果你想禁用自动导入，你可以在你的 nuxt.config.ts 中将 imports.autoImport 设置为 false。

export default defineNuxtConfig({
  imports: {
    autoImport: false
  }
})

这将完全禁用隐式自动导入，但仍然可以使用 显式导入。

+This will disable auto-imports completely but it's still possible to use explicit imports from #imports.

Auto-imported Components

Nuxt 还会自动从~/components目录导入组件，尽管这是与自动导入可组合项和实用函数分开配置的。

要禁用从您自己的 ~/components 目录自动导入组件，您可以将 components.dirs 设置为空数组(但请注意，这不会影响模块添加的组件)。

export default defineNuxtConfig({
  components: {
    dirs: []
  }
})