Nuxt3第四篇【数据获取与状态共享】

数据获取

在项目开发中获取数据这步操作是必要的

这里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

两个属性

• 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共享使用了。。。
基本完结~（用于拓展）