Nuxt3【内置的组合式函数】2024最新版

朝阳39

已于 2024-08-19 17:43:51 修改

阅读量966

点赞数 17

分类专栏： Nuxt 文章标签： Nuxt3 组合式函数

于 2024-08-19 14:43:48 首次发布

本文链接：https://blog.csdn.net/weixin_41192489/article/details/141316094

版权

Nuxt 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

Nuxt3 内置的组合式函数默认已自动导入，全局可直接使用

请求相关

useAsyncData

获取异步解析的数据（会阻塞导航，直到获取到异步数据，才会继续导航解析）

const page = ref(1)
const { data: posts } = await useAsyncData(
  'posts',
  () => $fetch('https://fakeApi.com/posts', {
    params: {
      page: page.value
    }
  }), {
    watch: [page]
  }
)

第1个参数：（字符串）自定义的唯一值，用于获取数据的去重
第2个参数：（函数）返回真值的异步函数（下文称为 handler 函数），否则请求可能会在客户端上重复。
第3个参数：（对象）配置项
- server：（默认为true）是否在服务器上获取数据
- lazy：（默认为false）是否在加载路由后解析异步函数，而不是阻塞客户端导航
- immediate：（默认为true）是否立即触发请求。
- default：设置 data 的默认值
- transform：可以用来修改 handler 函数结果的函数
- pick：只从handler函数结果中选择指定的键
- watch：监听响应式源以自动刷新
- deep：（默认为true）是否以深层响应式对象返回数据。将其设置为 false 可返回浅层响应式对象的数据来提高性能，如果你的数据不需要深层响应式

返回值

data：异步函数的结果。
pending：一个布尔值，指示数据是否仍在获取中。
refresh/execute：一个可以用来刷新handler函数返回的数据的函数。
error：如果数据获取失败，则为一个错误对象。
status：一个字符串，表示数据请求的状态（“idle”、“pending”、“success”、“error”）。默认情况下，Nuxt会等待refresh完成后才能再次执行它。

useLazyAsyncData

与 useAppConfig 用法相同，但不会阻塞导航

<script setup lang="ts">
/* 在获取完成之前，导航将会发生。
  在组件的模板中直接处理挂起和错误状态
*/
const { pending, data: count } = await useLazyAsyncData('count', () => $fetch('/api/count'))

watch(count, (newCount) => {
  // 因为 count 可能最初为 null，你不会立即访问到它的内容，但你可以监视它。
})
</script>

<template>
  <div>
    {{ pending ? '加载中' : count }}
  </div>
</template>

useFetch

从API端点获取数据。（基于 useAsyncData 和 $fetch 的封装，所以也会阻塞导航，直到获取到异步数据，才会继续导航解析）

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

第1个参数：URL
第2个参数：（对象）选项
- method：请求方法。
- query：参数
- params：query的别名。
- body：请求体 - 自动转换为字符串（如果传递的是对象）。
- headers：请求头。
- baseURL：请求的基本URL。
- 其他选项同 useAsyncData
返回值同 useAsyncData

使用拦截器

const { data, pending, error, refresh } = await useFetch('/api/auth/login', {
  onRequest({ request, options }) {
    // 设置请求头
    options.headers = options.headers || {}
    options.headers.authorization = '...'
  },
  onRequestError({ request, options, error }) {
    // 处理请求错误
  },
  onResponse({ request, response, options }) {
    // 处理响应数据
    localStorage.setItem('token', response._data.token)
  },
  onResponseError({ request, response, options }) {
    // 处理响应错误
  }
})

useLazyFetch

与 useFetch 用法相同，但不会阻塞导航

<script setup lang="ts">
/* 在获取完成之前导航将会发生。
  在组件模板中直接处理待处理和错误状态。
*/
const { pending, data: posts } = await useLazyFetch('/api/posts')
watch(posts, (newPosts) => {
  // 因为posts可能最初为null，你不能立即访问它的内容，但可以监视它。
})
</script>

<template>
  <div v-if="pending">
    加载中 ...
  </div>
  <div v-else>
    <div v-for="post in posts">
      <!-- 做一些操作 -->
    </div>
  </div>
</template>

useRequestURL

获取请求的URL

const url = useRequestURL()

useRequestHeaders

获取请求的头部信息

在浏览器中，useRequestHeaders 将返回一个空对象。

// 获取所有请求头信息
const headers = useRequestHeaders()

// 仅获取 cookie 请求头信息
const headers = useRequestHeaders(['cookie'])

范例：对未来的内部请求进行授权

<script setup lang="ts">
const { data } = await useFetch('/api/confidential', {
  headers: useRequestHeaders(['authorization'])
})
</script>

useRequestEvent

获取传入的请求事件

在浏览器中，useRequestEvent 会返回 undefined。

// 获取底层请求事件
const event = useRequestEvent()

// 获取 URL
const url = event.path

路由相关

useRoute

返回当前路由

路由的属性：

query：URL 中的参数
params：post 请求中的传参
fullPath：与当前路由关联的编码URL，包含路径、查询和哈希
hash：URL中以#开头的解码哈希部分
matched：与当前路由位置匹配的规范化的匹配路由数组
meta：附加到记录的自定义数据
name：路由记录的唯一名称
path：URL中编码的路径名部分
redirectedFrom：在到达当前路由位置之前尝试访问的路由位置

useRouter

返回路由实例（即路由管理器）

路由实例的方法：

addRoute(): 向路由实例添加新的路由。可以提供 parentName 将新路由添加为现有路由的子路由。
removeRoute(): 根据名称移除现有路由。
getRoutes(): 获取所有路由记录的完整列表。
hasRoute(): 检查是否存在具有给定名称的路由。
resolve(): 返回路由位置的规范化版本。还包括一个 href 属性，其中包含任何现有的基础路径。
back(): 如果可能，返回上一页，与 router.go(-1) 相同。
forward(): 如果可能，前进到下一页，与 router.go(1) 相同。
go(): 在历史记录中向前或向后移动，不受 router.back() 和 router.forward() 中施加的层次结构限制。
push(): 通过将新条目推入历史堆栈来以编程方式导航到新的 URL。建议使用 navigateTo 代替。
replace(): 通过替换当前路由历史堆栈中的当前条目来以编程方式导航到新的 URL。建议使用 navigateTo 代替。
路由守卫：afterEach、beforeEach 和 beforeResolve
isReady(): 返回一个 Promise，在路由完成初始导航时解析。
onError: 添加一个错误处理程序，每次导航期间发生未捕获的错误时都会调用该处理程序。

配置相关

useAppConfig

获取项目中定义的响应式应用配置（app.config.ts 中定义），如主题配置

app.config.ts

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

页面中获取配置

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

useRuntimeConfig

访问运行时配置变量

详见 https://www.nuxt.com.cn/docs/api/composables/use-runtime-config

设置相关

useState

创建一个响应式且支持服务器端渲染的共享状态

不能包含无法序列化的内容，例如类、函数等。（因为 useState 中的数据将被序列化为 JSON）

// 创建一个响应式状态并设置默认值
const count = useState('counter', () => Math.round(Math.random() * 100))

当状态无需具有深层响应性时，可将 useState 与 shallowRef 结合使用。当状态包含大型对象和数组时，可以提高性能。

const state = useState('my-shallow-state', () => shallowRef({ deep: 'not reactive' }))
// isShallow(state) === true

useCookie

读取和写入cookie

第1个参数：（字符串）自定义cookie的名称
第2个参数：（对象）选项
- maxAge：指定一个number（以秒为单位）作为Max-Age Set-Cookie属性的值。给定的数字将被四舍五入为整数。默认情况下，不设置最大年龄。
- expires：指定一个Date对象作为Expires Set-Cookie属性的值。默认情况下，不设置过期时间。大多数客户端将把它视为“非持久cookie”，并在条件（比如退出Web浏览器应用程序）下删除它。
- 同时设置了expires和maxAge，则maxAge优先，但并非所有客户端都遵守这一规定，因此，如果两者都设置了，它们应该指向相同的日期和时间！
- 如果expires和maxAge都没有设置，那么cookie将仅在会话期间存在，并在用户关闭浏览器时被删除
- httpOnly （默认 false）是否设置HttpOnly属性
- secure （默认 false）是否设置secure属性
- domain 指定一个值作为Domain Set-Cookie属性的值。默认情况下，不设置域，大多数客户端将仅将cookie应用于当前域。
- path 指定一个值作为Path Set-Cookie属性的值。默认情况下，路径被认为是"默认路径"。
- sameSite 指定一个boolean或string值作为SameSite Set-Cookie属性的值。
- encode 编码 cookie 的函数，默认为 JSON.stringify + encodeURIComponent。
- decode 解码cookie 的函数，默认为 decodeURIComponent + destr。
- default 一个返回cookie的默认值的函数，可以返回一个Ref。
- watch （默认 true , 监听cookie的ref数据变化以及其嵌套属性）, 为 false 时不监听cookie的ref数据变化，为 shallow 时只监听cookie的ref数据的顶级属性变化。

<script setup lang="ts">
const list = useCookie(
  'list',
  {
    default: () => [],
    watch: 'shallow'
  }
)

function add() {
  list.value?.push(Math.round(Math.random() * 1000))
  // list cookie不会随此更改而更新
}

function save() {
  if (list.value && list.value !== null) {
    list.value = [...list.value]
    // list cookie随此更改而更新
  }
}
</script>

<template>
  <div>
    <h1>列表</h1>
    <pre>{{ list }}</pre>
    <button @click="add">添加</button>
    <button @click="save">保存</button>
  </div>
</template>

useHead

自定义 Nuxt 应用中单个页面的头部属性

参数详见 https://www.nuxt.com.cn/docs/api/composables/use-head

使用 tagPosition: ‘bodyClose’ 选项将它们附加到标签的末尾。

<script setup lang="ts">
useHead({
  script: [
    {
      src: 'https://third-party-script.com',
      // 有效选项为：'head' | 'bodyClose' | 'bodyOpen'
      tagPosition: 'bodyClose'
    }
  ]
})
</script>

useHeadSafe

是对 useHead 组合函数的包装，它限制了输入值只能是安全的。

useHeadSafe({
  script: [
    { id: 'xss-script', innerHTML: 'alert("xss")' }
  ],
  meta: [
    { 'http-equiv': 'refresh', content: '0;javascript:alert(1)' }
  ]
})
// 将安全地生成以下内容
// <script id="xss-script"></script>
// <meta content="0;javascript:alert(1)">

useSeoMeta

向网站添加元标签

app.vue

<script setup lang="ts">
useSeoMeta({
  title: '我的神奇网站',
  ogTitle: '我的神奇网站',
  description: '这是我的神奇网站，让我告诉你关于它的一切。',
  ogDescription: '这是我的神奇网站，让我告诉你关于它的一切。',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

当插入具有响应性的标签时，需使用计算属性的获取器语法（() => value）

<script setup lang="ts">
const title = ref('我的标题')

useSeoMeta({
  title,
  description: () => `描述：${title.value}`
})
</script>

完整的参数列表见 https://github.com/harlan-zw/zhead/blob/main/src/metaFlat.ts

useServerSeoMeta

将网站的SEO元标签定义为一个平铺对象。

参数与useSeoMeta完全相同

在大多数情况下，元标签不需要是响应式的，因为搜索引擎机器人只会扫描初始加载的页面。因此，我们建议使用useServerSeoMeta作为性能优化的工具，在客户端不执行任何操作（或返回一个head对象）。

<script setup lang="ts">
useServerSeoMeta({
  robots: 'index, follow'
})
</script>

其他

useError

返回正在处理的全局Nuxt错误

const error = useError()

内含属性有：

  // HTTP响应状态码
  statusCode: number
  // HTTP响应状态消息
  statusMessage: string
  // 错误消息
  message: string

useNuxtApp

获取 Nuxt 运行时上下文，详见 https://www.nuxt.com.cn/docs/api/composables/use-nuxt-app

useNuxtData

用于访问 useAsyncData ，useLazyAsyncData，useFetch 和 useLazyFetch 的当前缓存值，可实现乐观更新

详见 https://www.nuxt.com.cn/docs/api/composables/use-nuxt-data

useHydration

可准确的控制数据，主要在内部使用（比如 useAsyncData）或由 Nuxt 模块使用

朝阳39

关注

17
点赞
踩
21

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录