Vue3使用axios

一、安装axios

npm install axios

二、创建axios实例（axiosInstance.ts）

//导入axios
import axios from "axios";

//使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。
const axiosAPI = axios.create({
    baseURL: 'http://localhost:3000', //请求后端数据的基本地址，自定义
    timeout: 200 //请求超时设置，单位ms
})

//导出我们建立的axios实例模块，ES6 export用法
export default axiosAPI

三、在main.ts文件中配置axios实例的全局引用

import { createApp } from 'vue'
import App from './App.vue'

//导入axios实例
import axiosInstance from "./plugins/axiosInstance";

const app = createApp(App);//建立一个vue3的app

app.config.globalProperties.$axios = axiosInstance  //配置axios的全局引用

app.mount('#app');//将这个vue3的app全局挂载到#app元素上

四、在Vue组件中使用

<template>
    <template v-if="books.list.length>0">
      <table>
        <thead>
        <tr>
          <th>图书编号</th>
          <th>图书名称</th>
          <th>出版社</th>
          <th>出版时间</th>
          <th>单价</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(book,index,) in books.list" key="{
   
   { index }}">
          <td>{
   
   { book.bookId }}</td>
          <td>{
   
   { book.bookName }}</td>
          <td>{
   
   { book.publishing }}</td>
          <td>{
   
   { book.publishTime }}</td>
          <td>{
   
   { book.price }}</td>
          <td>
            <button :disabled="book.count <= 0" @click="decrement(index)">-</button>
            <span class="counter">{
   
   { book.count }}</span>
            <button @click="increment(index)">+</button>
          </td>
          <td>
            <button @click="removeBook(index)">移出</button>
          </td>
        </tr>
        </tbody>
      </table>
      <h2>总价：￥{
   
   { totalPrice }}</h2>
    </template>
    <template v-else>
      <h2>购物车为空</h2>
    </template>
</template>

<script>
import { reactive } from 'vue'
import axiosAPI from '../plugins/axiosInstance'

export default {
  name: "Books",
  setup() {
    let books = reactive({
      list:[]
    });
    const getBooks = function () {
      axiosAPI({
        url: '/books/findAll',
        method: 'get'
      }).then((res)=>{
        books.list = res.data.result
        console.log(books.list)
      })
    }
    function decrement(index){
      books.list[index].count--
    }
    function increment(index){
      books.list[index].count++
    }
    function removeBook(index){
      books.list.splice(index,1)
    }
    return {
      books,
      decrement,
      increment,
      removeBook,
      getBooks
    }
  },
  mounted() {
    this.getBooks()
  },
  computed:{
    totalPrice(){
      let total = 0;
      for (const book of this.books.list) {
        total += book.price * book.count
      }
      return total;
    }
  }
}
</script>

<style scoped>
    table{
      border-collapse: collapse;
      margin: 15px auto;
    }
    th,td{
      border: 1px solid #e9e9e9;
      padding: 8px 16px;
      text-align: center;
    }
    th{
      background-color: #f7f7f7;
      color: #5c6b77;
      font-weight: 600;
    }
    .counter{
      margin: 0 5px;
    }
</style>