<div class="collection"><el-button @click="collect">收藏</el-button></div>点击收藏按钮，上传KNOWLEDGEID参数到post接口； 这是封装的接口： export function AddKnowledgeCollectApi(data: AddKnowledgeCollect): AxiosPromise<KnowledgeCollectItem[]> { return http({ url: '/T_KMS_BU_KNOWLEDGECOLLECT/Add', method: 'post', data }); } 这是接口类型：export interface AddKnowledgeCollect { KNOWLEDGEID: string }在vue3中实现这个功能，并增加收藏成功的话，按钮从收藏变成取消收藏；取消收藏的接口是：export function DeleteByKnowledgeApi(params: DeleteKnowledge): AxiosPromise<KnowledgeCollectItem[]> { return http({ url: '/T_KMS_BU_KNOWLEDGECOLLECT/DeleteByKnowledgeId', method: 'get', params }); }这个是接口类型：export interface DeleteKnowledge { knowledgeId: string, }，如果取消收藏成功，则按钮变回收藏

好的，这是一个实现收藏和取消收藏的功能的示例代码：

<template>
  <div>
    <el-button @click="toggleCollection">{{ isCollected ? '取消收藏' : '收藏' }}</el-button>
  </div>
</template>

<script>
import { AddKnowledgeCollectApi, DeleteByKnowledgeApi } from '@/api/knowledge'

export default {
  data() {
    return {
      isCollected: false, // 是否已收藏
      knowledgeId: '123' // 知识点 ID，这里假设为固定值
    }
  },
  methods: {
    async toggleCollection() {
      if (this.isCollected) {
        // 取消收藏
        try {
          await DeleteByKnowledgeApi({ knowledgeId: this.knowledgeId })
          this.isCollected = false
        } catch (e) {
          console.error('取消收藏失败：', e)
        }
      } else {
        // 收藏
        try {
          await AddKnowledgeCollectApi({ KNOWLEDGEID: this.knowledgeId })
          this.isCollected = true
        } catch (e) {
          console.error('收藏失败：', e)
        }
      }
    }
  }
}
</script>

这里使用了 Element UI 的按钮组件，点击按钮时调用 `toggleCollection` 方法。`isCollected` 记录了当前是否已收藏，初始值为 `false`。`knowledgeId` 记录了当前知识点的 ID，这里假设为固定值，你需要根据实际情况修改。

`toggleCollection` 方法会根据 `isCollected` 的值来判断是收藏还是取消收藏。如果当前已收藏，则调用 `DeleteByKnowledgeApi` 接口，传入 `knowledgeId` 参数；如果当前未收藏，则调用 `AddKnowledgeCollectApi` 接口，传入 `KNOWLEDGEID` 参数。如果接口调用成功，将更新 `isCollected` 的值，按钮的文本也会相应地改变。

注意，这里使用了 `async/await` 异步语法，需要注意错误处理。如果接口调用失败，会在控制台输出相应的错误信息。