网站主要应用,在哪里推广自己的产品,黄冈做网站技术支持的,做网站网页需要什么技术composables
在 Nuxt 3 中#xff0c;composables#xff08;组合式函数#xff09;是一种用于封装和复用有状态逻辑的机制。它类似于 Vue 3 中的组合式 API#xff0c;允许你将相关的逻辑#xff08;如数据获取、状态管理等#xff09;提取到独立的函数中#xff0c;然…composables
在 Nuxt 3 中composables组合式函数是一种用于封装和复用有状态逻辑的机制。它类似于 Vue 3 中的组合式 API允许你将相关的逻辑如数据获取、状态管理等提取到独立的函数中然后在组件中进行调用。这些函数可以访问和操作组件的响应式数据、生命周期钩子等使得代码更加模块化和易于维护。
我们可以在composables文件夹中创建一个js文件在js文件中定义我们需要的逻辑可以在任意vue文件中进行代码的复用 怎么使用呢您请看以下代码截图 看图可知 通过文件名使用我们上面定义的函数。 $fetch和useAsyncData
$fetch‘url接口路径’请求数据
在 Nuxt 3 中$fetch 是基于 ofetch 库封装的。ofetch 是一个轻量级的 Fetch API 的封装提供了一些额外的功能比如请求和响应的处理、自动序列化 JSON 数据、支持 AbortController 等。
主要特点
简化请求$fetch 使得发送 HTTP 请求变得更加简单尤其是在处理 JSON 数据时。错误处理它可以自动处理 HTTP 错误并抛出异常方便开发者进行错误捕获。支持中间件可以通过配置来添加请求和响应的中间件。支持 AbortController可以轻松地取消请求。
const response await $fetch(https://api.example.com/data, {method: GET, // 请求方法headers: {Authorization: Bearer token // 添加请求头}
})直接向以上方式写的话会在服务端执行一次在客户端执行一次如果是请求数据库的就会有问题了所以我们需要加上限定条件的代码 if (import.meta.server) {const response await $fetch(https://api.example.com/data, {method: GET, // 请求方法headers: {Authorization: Bearer token // 添加请求头}})}
但是呢这还不是官方推荐的。所以官方推荐了这种方法useAsyncData注意useAsyncData是异步的useAsyncData获得的数据会自动变成响应式的
//useAsyncData在服务端执行时只会执行一次
let res await useAsyncData(test,(){return $fetch(http://localhost:8080/user)
})
useAsyncData 的第一个参数是一个键在这个例子中是 test它用于缓存数据。如果你在同一个组件中多次调用 useAsyncData并且使用相同的键它将返回缓存的数据而不会重新发起请求。这对于提高性能和减少不必要的请求非常有用。
key需要唯一如果不唯一会导致数据不一致。 useFetchlazyrefresh
useFetchrefresh
// useFetch在客户端和服务端都执行
//useFetch实际是useAsyncData$Fetch的语法糖
//useFetch里面会自动维护一个key返回的数据和useAsyncData是一致的
const {refresh} await useFetch(http://localhost:8080/user)
//refresh只在服务端执行一次
refresh()
这个useFetchuseAsyncData$Fetch的语法糖useFetch里面会自动维护一个key返回的数据和useAsyncData是一致的
另外这个refresh是用来刷新token的也是只在服务端执行。
lazy
templatedivp首页/pdiv v-ifstatus pending正在请求/divdiv v-else请求成功/div/div
/templateconst {refresh,status} await useFetch(http://localhost:8080/user,{//先渲染标签lazy:true
})
//refresh只在服务端执行一次
refresh()
这个status一开始是pending请求完成变成success所以在页面一开始显示“正在请求”完成之后显示“请求成功”。
