用vue写异步增删改查

用Vue写异步增删改查的操作主要是通过axios库进行异步请求与后台进行交互。首先，需要在Vue项目中安装axios库，并在需要使用的组件中引入axios。然后，根据需求，在组件中定义相应的方法来处理增删改查的操作。例如，可以使用axios的get方法发送GET请求获取数据，使用post方法发送POST请求添加数据，使用put方法发送PUT请求修改数据，使用delete方法发送DELETE请求删除数据。

以下是一个示例代码：

<template>
  <div>
    <button @click="getData">获取数据</button>
    <ul>
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addData">添加数据</button>
    <button @click="updateData">修改数据</button>
    <button @click="deleteData">删除数据</button>
 </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: []
    };
  },
  methods: {
    async getData() {
      try {
        const response = await axios.get('/api/data');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    },
    async addData() {
      try {
        const response = await axios.post('/api/data', { name: 'New Data' });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
    async updateData() {
      try {
        const response = await axios.put('/api/data/1', { name: 'Updated Data' });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
    async deleteData() {
      try {
        const response = await axios.delete('/api/data/1');
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style>
/* 样式 */
</style>