数据获取
在项目开发中获取数据这步操作是必要的
这里nuxt3提供了4个获取数据的函数
- useFetch
- useLazyFetch
- useAsyncData
- useLazyAsyncData
它们都需要在
setup
或钩子函数中使用
首先写一个假数据api
根目录下创建server文件夹—>再在它下面创建api文件夹—>创建test.ts文件
const test=[
{
id:1,name:"碰磕",age:99
},
{
id:2,name:"学生",age:18
}
]
export default()=>{
return {
code:200,
data:test
}
}
useAsyncData
useAsyncData(key,请求);
$fetch
是nuxt3提供的请求方式
const {
data:data}=useAsyncData('test',()=>$fetch('/api/test'));
这样就拿到了返回过来的数据…
useFetch
useFetch(请求地址,通过pick过滤返回来的字段)
- 这里有个坑就是pick只能过滤返回数据结构为对象的情况下…
const {data:data}=await useFetch('/api/test',{pick:['data']})
console.log(data)
如果返回值不是对象结构,可以使用transform
进行过滤
const {data:data}=await useFetch('/api/test',{
transform(input){
return input.data
},
})
这里主要使用以上两个,剩下的两个加了个Lazy关键字懂得都懂…
状态共享
useState
扫描二维码关注公众号,回复: 14708707 查看本文章两个属性
- key:唯一值(去重)
- init:提供初始值的函数
创建一个共享文件
在根目录创建composables
文件夹—》在它下边创建useCount.ts
文件夹名字是固定的,这样nuxt才能识别进行自动引入
export const useCount=()=>useState("count",()=>1);
导出了count这个变量共享
使用:
<template>
<div>
<button @click="count--">-</button>
{
{count}}
<button @click="count++">+</button>
</div>
</template>
<script setup>
const count=useCount();
</script>
这样就能实现count
共享使用了。。。
基本完结~(用于拓展)