axios.defaults.baseURL = 'http://localhost:8080/book/'; var vm = new Vue({ el: '#app', data: { id: '', bookName:'', flag: false, submitFlag: false, books: [] }, methods:{ handle: async function () { //编辑 }, //编辑处理 toEdit: async function (id) { }, deleteBook: async function (id) { }, queryBooks: async function () { } }, computed:{ total: function () { } }, watch: { name: function (val) { } }, mounted:function () { } });请完善代码

根据你的代码，我来完善一下：

axios.defaults.baseURL = 'http://localhost:8080/book/';
var vm = new Vue({
  el: '#app',
  data: {
    id: '',
    bookName: '',
    flag: false,
    submitFlag: false,
    books: []
  },
  methods:{
    handle: async function () {
      // 编辑
      if (this.id) {
        try {
          const response = await axios.put(this.id, {
            bookName: this.bookName
          });
          if (response.status === 200) {
            this.submitFlag = true;
            this.books = await this.queryBooks();
          }
        } catch (error) {
          console.log(error);
        }
      } else {
        // 新增
        try {
          const response = await axios.post('', {
            bookName: this.bookName
          });
          if (response.status === 200) {
            this.submitFlag = true;
            this.books = await this.queryBooks();
          }
        } catch (error) {
          console.log(error);
        }
      }
    },
    // 编辑处理
    toEdit: async function (id) {
      try {
        const response = await axios.get(id);
        if (response.status === 200) {
          this.id = id;
          this.bookName = response.data.bookName;
          this.flag = true;
        }
      } catch (error) {
        console.log(error);
      }
    },
    deleteBook: async function (id) {
      try {
        const response = await axios.delete(id);
        if (response.status === 200) {
          this.books = await this.queryBooks();
        }
      } catch (error) {
        console.log(error);
      }
    },
    queryBooks: async function () {
      try {
        const response = await axios.get('');
        if (response.status === 200) {
          return response.data;
        }
      } catch (error) {
        console.log(error);
      }
      return [];
    }
  },
  computed:{
    total: function () {
      return this.books.length;
    }
  },
  watch: {
    bookName: function (val) {
      if (val) {
        this.flag = false;
        this.id = '';
      }
    }
  },
  mounted:function () {
    this.books = this.queryBooks();
  }
});

这是一个用 Vue 和 Axios 实现的简单的书籍管理系统，包含了增删改查等功能。其中，`handle` 方法用来新增或编辑书籍，`toEdit` 方法用来编辑书籍，`deleteBook` 方法用来删除书籍，`queryBooks` 方法用来查询所有书籍，`total` 计算属性用来计算书籍总数，`watch` 用来监听书名输入框的变化，`mounted` 生命周期钩子用来初始化数据。