vue3的ref和reactive的在接口的使用的的定义

vue3全局配置axios

main.js

import * as echarts from 'echarts'

import axios from 'axios'

const app = createApp(App)

app.config.globalProperties.$echarts = echarts;

app.config.globalProperties.$http = axios;//第一种方式

// app.provide("$http",axios) //第二种方式

组件使用

import { onMounted, ref, inject, getCurrentInstance, reactive, onBeforeMount } from 'vue';

// const $https = inject('$http')//第二种方式

let imgList = reactive({ data: [] });

let consruct = ref("")

// @ts-ignore

const { proxy } = getCurrentInstance();//第一种方式

// @ts-ignore

async function getImgList() {

// @ts-ignore

await proxy.$http.get('../../db.json').then((res) => {

console.log(res, res.data, res.data.data, '20')

imgList.data = res.data.data

consruct.value = res.data.ref

// imgList.map(i=>console.log(i.src))

console.log(consruct, imgList.data, '12')

})

}

onMounted(async () => {

await getImgList()

})

接口返回的数据: {"status":200,"msg":"获取图书列表成功","data":[{"id":1,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"},{"id":2,"bookname":"西游记","author":"吴承恩","publisher":"北京图书出版社"},{"id":3,"bookname":"红楼梦","author":"曹雪芹","publisher":"上海图书出版社"},{"id":239,"bookname":"水浒传续集","author":"施耐庵","publisher":"上海图书出版社"},{"id":240,"bookname":"122333","author":"兰陵笑笑生","publisher":"香江出版社出版"}]}

方法一：使用ref

组件代码：

<script setup>
  // getBooks获取的是服务器接口数据{status,data,msg}
  // 实际使用的数据是data属性
  import { getBooks } from "@/request/api.js";
  import { ref } from "vue";
  // ref初始化一个变量，用于接收接口数据data属性
  let books = ref(null);
  async function handler() {
    // await 后面的函数返回的是一个promise对象，我们只需要其中data属性的值，所以做了解构
    let { data } = await getBooks();
    // 由于是使用ref，所以javascript中需要给.value赋值
    books.value = data;
    console.log("books:", books);
  }
</script>
<template>
首页
<button @click="handler">获取书籍信息</button>
<hr />
<table border="1">
  <tr>
    <td>序号</td>
    <td>书名</td>
    <td>作者</td>
    <td>出版社</td>
  </tr>
  <!-- 模板内直接访问，不需要使用 .value 方式访问 -->
  <tr v-for="book in books" :key="book.id">
    <td>{{ book.id }}</td>
    <td>{{ book.bookname }}</td>
    <td>{{ book.author }}</td>
    <td>{{ book.publisher }}</td>
  </tr>
  </table>
</template>

方法二：使用reactive

组件代码：

<script setup>
  // getBooks获取的是服务器接口数据{status,data,msg}
  // 实际使用的数据是data属性
  import { getBooks } from "@/request/api.js";
  import { reactive } from "vue";
  // reactive初始化一个变量，用于接收接口数据data属性
  let result = reactive({ books: [] });
  async function handler() {
    // await 后面的函数返回的是一个promise对象，我们只需要其中data属性的值，所以做了解构
    let { data } = await getBooks();
    result.books = data;
  }
</script>
<template>
首页
<button @click="handler">获取书籍信息</button>
<hr />
<table border="1">
  <tr>
    <td>序号</td>
    <td>书名</td>
    <td>作者</td>
    <td>出版社</td>
  </tr>
  <tr v-for="book in result.books" :key="book.id">
    <td>{{ book.id }}</td>
    <td>{{ book.bookname }}</td>
    <td>{{ book.author }}</td>
    <td>{{ book.publisher }}</td>
  </tr>
  </table>
</template>