Nuxt3请求封装数据获取详解、useState和useCookie的使用

一、与传统方式不同，Nuxt3内置了四种请求方式

1、useFetch

2、useLazyFetch

3、useAsyncData

4、useLazyAsyncData

注意：1、useFetch 和 useLazyFetch，useAsyncData和useLazyAsyncData 区别，服务端渲染的时候，这两个没差别，在客户端渲染的时候，useLazyFetch 相当于请求是数据是 suspense 的，而 useLazyFetch 一定要全部请求完毕，才进行路由内容的显示。2、我们更多使用的是useAsyncData和useFetch

二、为了方便我管理，来封装一个 useFetch 请求,新建utils/request.ts

import { _AsyncData } from 'nuxt3/dist/app/composables/asyncData'
//import baseUrl from './baseUrl'
import { ElMessage } from 'element-plus'

let baseUrl = ''
// 指定后端返回的基本数据类型
export interface ResponseConfig {
    code: number,
    status: number,
    data: any,
    msg: string
}
export interface ValueConfig {
    value: any,

}

const fetch = (url: string, options?: any): Promise<any>  => {
    const reqUrl = baseUrl + url
    return new Promise((resolve, reject) => {
        useFetch(reqUrl, { ...options }).then(({ data, error }: _AsyncData) => {
            if (error.value) {
                reject(error.value)
                return
            }
            const value = data.value
            if (!value) {
                // 这里处理错误回调
                // reject(value)
                // $router.replace('/reject/' + value.status)
            }else if(value.code == 102){
                ElMessage({
                    message: value.msg,
                    type: 'error',
                })
            } else {
                resolve(ref(value))
            }
        }).catch((err: any) => {
            reject(err)
        })
    })
}

export default new class Http {

    get(url: string, params?: any): Promise<any> {
        return fetch(url, { method: 'get', params })
    }

    post(url: string, params?: any): Promise<any>  {
        return fetch(url, { method: 'post', params })
    }

    put(url: string, body?: any): Promise<any>  {
        return fetch(url, { method: 'put', body })
    }

    delete(url: string, body?: any): Promise<any>  {
        return fetch(url, { method: 'delete', body })
    }
}

三、新建一个API管理文件，utils/api.ts

import Http from '@/utils/http'

export const config1 = (params?) => {
    return Http.get('接口地址', params)
}

export const config2 = (params?) => {
    return Http.post('接口地址', params)
}

四、在页面中使用，例如：

<template>
    <h3>你好</h3>
</template>

<script setup lang="ts">
 //按需引入
import { ref, reactive, onMounted, getCurrentInstance }  from 'vue'
 //引入 api中对应的接口请求
import {config1,config2} from "../utils/api"

interface ArrayList {
    banner: object
}
const state:ArrayList = reactive({
 		banner:[],
})

//config1
config1('').then(res => {
  state.banner = res.value.data.listlunbos
}).catch((err)=>{
  console.log(err)
})

//config2
const data = {}
config2(data).then((res) => {
  if(res.value.code == 200){
    state.cooporationTost = false
    ElMessage({
      message: '我们会第一时间与您联系',
      type: 'success',
    })
  }else{
    ElMessage({
      message: res.value.data.message,
      type: 'success',
    })
  }
}).catch((err) => {
  console.log(err)
})

</script>

<style scoped>

</style>

五、useState和useCookie的使用

在Nuxt2中，如果我们要使用cookie,需要引入插件js-cookie，在Nuxt3中，也不再集成Vuex，可以利用Nuxt3的composables自动导入属性，把它们定义在composables目录中，这样他们将成为全局类型安全的状态。

1、useState使用

首先我们需要在项目的根目录新建composables文件夹，然后创建状态管理文件如：composables/state.ts.

//首先引入useState、useCookie
import { useState, useCookie } from "nuxt/app";

export const useInfo = () => useState("userData",() => {
    return {
        id: 1,
        name: '用户1'
    }
})

// token
export const useToken = () => useState("token",()=> "aaadd232cfdfdf23fdf") 

 如何获取修改 state 值

<template>
    <h3>你好</h3>
</template>

<script setup lang="ts">
  
	const userData = useInfo();

	const token = useToken();

</script>

<style scoped>

</style>

2、useCookie使用

<template>
    <h3>你好</h3>
</template>

<script setup lang="ts">
  
	// 获取 Cookie
  const Cookies = useCookie('token')

	// 设置 Cookie
	Cookies.value = Cookies.value || ''

	// 删除  Cookie
	cookie.value = undefined || null

</script>

<style scoped>

</style>