在 Nuxt 3 中使用该目录时，composables/ 目录将自动导入，将 Vue 可组合项（Hooks）自动导入到您的应用程序中，即不需要在其它地方 import；所以一些通用的 hooks，只需放入该目录下即可；

新建 src/composables 目录，新建 src/composables/useFoo.ts 文件
命名导出

// ~/composables/useFoo.ts
export const useFoo = () => {
  return useState('foo', () => 'bar')
}

默认导出

// ~/composables/useFoo.ts 或 ~/composables/use-foo.ts
export default function () {
  return useState('foo', () => 'bar')
}

在 src/pages/index.vue 中使用

<template>
  <div>
    {{ foo }}
  </div>
</template>
<script setup>
const foo = useFoo()
</script>

自定义 hooks

新建 src/composables 目录，新建 src/composables/useFoo.ts 文件

import i18n from '@/lang'
export default function useTitle() {
  const $t = i18n.global.t
  function setTitle() {
    document.title = $t('fields.title')
  }
  return { setTitle }
}

在 src/pages/index.vue 中使用

const title = useTitle()
onMounted(() => title.setTitle())

自动导入规则

Nuxt 仅扫描composables目录顶层的文件，例如：

composables
  | - index.ts // 扫描
  | - useFoo.ts // 扫描
  | - nested
  | --- utils.ts // 不扫描

只有composables/index.ts和composables/useFoo.ts会被自动扫描导入。
为了让被嵌套的模块也可以自动导入，可以重新导出它们（推荐）或配置扫描器：

重新导出（推荐）

从composables/index.ts文件中重新导出你需要的composables。

// composables/index.ts
// 在 index.ts 中导入 utils 组合方法，同时导出该方法
export { utils } from './nested/utils.ts'

配置扫描器

在 nuxt.config.ts 中配置扫描 composables 文件夹内的嵌套目录

// nuxt.config.ts
export default defineNuxtConfig({
  imports: {
    dirs: [
      // 扫描顶层模块
      'composables',
      // 或用一个特定的名称和文件扩展名嵌套一级深度的扫描模块
      'composables/*/index.{ts,js,mjs,mts}',
      // 或扫描指定目录下的所有模块
      'composables/**'
    ]
  }
})

nuxt 内置 hooks

:::info 以下 hooks 为内部集成的 API，不需要手动 import 导入即可使用 :::

useAppConfig

访问项目中的 Nuxt 配置

const appConfig = useAppConfig()
console.log(appConfig)

useAsyncData

在页面、组件和插件中，您可以使用 useAsyncData 来访问异步返回的数据；

const { data, pending, error, refresh } = await useAsyncData(
  'mountains',
  () => $fetch('https://api.nuxtjs.dev/mountains')
)

useFetch

顾名思义，这就是一个 fetch 请求；在页面、组件或者插件中可以使用 useFetch 获取任意URL资源。
useFetch是对 useAsyncData 包装，自动生成 key 同时推断响应类型，用起来更简单。

const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{
  query: { param1, param2: 'value2' }
})

useCookie

在页面、组件和插件中，可以使用 useCookie 一个 SSR 友好的 hooks 来读取和写入 cookie。

<template>
  <div>
    <h1> Counter: {{ counter || '-' }}</h1>
    <button @click="counter = null">
      reset
    </button>
    <button @click="counter--">
      -
    </button>
    <button @click="counter++">
      +
    </button>
  </div>
</template>
<script setup>
const counter = useCookie('counter')
counter.value = counter.value || Math.round(Math.random() * 1000)
</script>

useHead

Nuxt 提供 useHead 可组合项来添加和自定义 Nuxt 应用程序各个页面的头部属性。

useHead(meta: MaybeComputedRef<MetaObject>): void
interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[]
  htmlAttrs?: HtmlAttributes
  bodyAttrs?: BodyAttributes
}

<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>

useRoute

useRoute 是一个在实际项目开发中使用较多的 hooks，主要返回当前路由的一些数据；并且必须在 setup 函数、插件或路由中间件中调用。

<script setup>
const route = useRoute()
const { data: mountain } = await useFetch(`https://api.nuxtjs.dev/mountains/${route.params.slug}`)
</script>
<template>
  <div>
    <h1>{{ mountain.title }}</h1>
    <p>{{ mountain.description }}</p>
  </div>
</template>

useRouter

useRouter 返回路由器的实例，并且必须在设置函数、插件或路由中间件中调用。

const router = useRouter();
router.back();
router.forward();
router.go();
router.push({ path: "/home" });
router.replace({ hash: "#bio" });