vue3封装后台接口的方法

Vue 3 推荐使用 `axios` 库进行后台接口的封装。以下是一个简单的封装示例：

import axios from 'axios'

const apiClient = axios.create({
  baseURL: 'http://localhost:3000/api', // 后台接口的基础 URL
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

export default {
  // 封装获取数据的方法
  getData () {
    return apiClient.get('/data')
  },
  // 封装发送数据的方法
  sendData (data) {
    return apiClient.post('/data', data)
  },
  // 封装更新数据的方法
  updateData (id, data) {
    return apiClient.put(`/data/${id}`, data)
  },
  // 封装删除数据的方法
  deleteData (id) {
    return apiClient.delete(`/data/${id}`)
  }
}

在组件中使用封装好的接口方法：

<template>
  <div>
    <button @click="getData">获取数据</button>
    <button @click="sendData">发送数据</button>
    <button @click="updateData">更新数据</button>
    <button @click="deleteData">删除数据</button>
  </div>
</template>

<script>
import api from '@/api'

export default {
  methods: {
    async getData () {
      const response = await api.getData()
      console.log(response.data)
    },
    async sendData () {
      const data = { name: 'test', age: 18 }
      const response = await api.sendData(data)
      console.log(response.data)
    },
    async updateData () {
      const id = 1
      const data = { name: 'update', age: 20 }
      const response = await api.updateData(id, data)
      console.log(response.data)
    },
    async deleteData () {
      const id = 1
      const response = await api.deleteData(id)
      console.log(response.data)
    }
  }
}
</script>

在这个示例中，我们封装了四个方法：`getData`、`sendData`、`updateData` 和 `deleteData`，并且在组件中使用了这些方法。你可以根据实际情况来添加其他的方法。