以下 hooks 为内部集成的 API，不需要手动 import 导入即可使用；
1. useAppConfig
访问项目中的 Nuxt 配置
const appConfig = useAppConfig()
console.log(appConfig)
2. useAsyncData
在页面、组件和插件中，您可以使用 useAsyncData 来访问异步返回的数据；
const { data, pending, error, refresh } = await useAsyncData(
'mountains',
() => $fetch('https://api.nuxtjs.dev/mountains')
)
3. 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' }
})
4. 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>
5. useHead
Nuxt 提供 useHead 可组合项来添加和自定义 Nuxt 应用程序各个页面的头部属性。
6. 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>
7. useRouter
useRouter 返回路由器的实例，并且必须在设置函数、插件或路由中间件中调用。
const router = useRouter();
router.back();
router.forward();
router.go();
router.push({ path: "/home" });
router.replace({ hash: "#bio" });
