vue增删改查函数调用

Vue增删改查（CRUD）函数是与后端API交互的一种方式，下面是一个简单的例子：

// 获取数据
async function fetchData() {
  try {
    const response = await axios.get('/api/data');
    this.dataList = response.data;
  } catch (error) {
    console.error(error);
  }
}

// 添加数据
async function addData(newData) {
  try {
    const response = await axios.post('/api/data', newData);
    this.dataList.push(response.data);
  } catch (error) {
    console.error(error);
  }
}

// 更新数据
async function updateData(id, updatedData) {
  try {
    await axios.put(`/api/data/${id}`, updatedData);
    const index = this.dataList.findIndex(data => data.id === id);
    this.dataList.splice(index, 1, updatedData);
  } catch (error) {
    console.error(error);
  }
}

// 删除数据
async function deleteData(id) {
  try {
    await axios.delete(`/api/data/${id}`);
    const index = this.dataList.findIndex(data => data.id === id);
    this.dataList.splice(index, 1);
  } catch (error) {
    console.error(error);
  }
}

在Vue组件中，你可以像这样调用这些函数：

export default {
  data() {
    return {
      dataList: [],
      newData: {
        // 初始化一个空的数据对象
      },
      updatedData: {
        // 初始化一个空的数据对象
      },
      selectedData: null,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async addNewData() {
      await this.addData(this.newData);
      this.newData = {}; // 清空表单
    },
    async updateSelectedData() {
      await this.updateData(this.selectedData.id, this.updatedData);
      this.selectedData = null; // 清空选中的数据
      this.updatedData = {}; // 清空表单
    },
    async deleteSelectedData() {
      await this.deleteData(this.selectedData.id);
      this.selectedData = null; // 清空选中的数据
    },
    selectData(data) {
      this.selectedData = data;
      // 将选中的数据赋值给表单
      this.updatedData = Object.assign({}, data);
    },
  },
};

以上是一个简单的增删改查操作的示例，你可以根据自己的业务逻辑进行调整。