mounted(){ this.goods = JSON.parse(localStorage.getItem("goods")) || [] axios({ method:"get", url:"/goodlist" }).then((res)=>{ this.goodList = res.data.goodlist; console.log(res) console.log(this.goodList) this.goodList1 = this.goodList.find( (item) => item.id === this.$route.params.id ) }) }

这是一个Vue.js的生命周期钩子函数 `mounted()`，在组件挂载后被调用。代码中通过 `axios` 发送一个 GET 请求，获取 `/goodlist` 路径的数据。当请求成功后，将返回的数据赋值给 `this.goodList`，并将 `this.$route.params.id` 参数与 `this.goodList` 中的元素进行匹配，找到对应的商品信息并赋值给 `this.goodList1` 变量。同时，代码中还使用了本地存储 `localStorage` 来保存 `this.goods` 变量。如果本地存储中没有 `goods` 变量，则将其赋值为空数组 `[]`。

相关问题

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 () { //编辑 var book = { id: this.id, bookName: this.bookName }; await axios.put(book.id, book); await this.queryBooks(); this.id = ''; this.bookName = ''; this.flag = false; }, //编辑处理 toEdit: async function (id) { var response = await axios.get(id); this.id = response.data.id; this.bookName = response.data.bookName; this.flag = true; }, deleteBook: async function (id) { }, queryBooks: async function () { var response = await axios.get(); this.books = response.data; } }, computed:{ total: function () { return this.books.length; } }, watch: { name: function (val) { console.log(val); } }, mounted:function () { this.queryBooks(); } });请补全代码通过axois远程交互操作图书信息。

以下是补全代码：

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 () {
      //编辑
      var book = {
        id: this.id,
        bookName: this.bookName
      };
      await axios.put(book.id, book);
      await this.queryBooks();
      this.id = '';
      this.bookName = '';
      this.flag = false;
    },
    //编辑处理
    toEdit: async function (id) {
      var response = await axios.get(id);
      this.id = response.data.id;
      this.bookName = response.data.bookName;
      this.flag = true;
    },
    deleteBook: async function (id) {
      await axios.delete(id);
      await this.queryBooks();
    },
    queryBooks: async function () {
      var response = await axios.get();
      this.books = response.data;
    }
  },
  computed:{
    total: function () {
      return this.books.length;
    }
  },
  watch: {
    name: function (val) {
      console.log(val);
    }
  },
  mounted:function () {
    this.queryBooks();
  }
});

以上代码通过使用axios库实现了查询、编辑、删除图书的功能。其中，axios库用于向服务器发送请求，获取图书信息，同时也可以用于更新和删除图书。此外，该代码中使用了Vue.js框架来实现数据的双向绑定，以及实现响应式的页面更新。

changeLang(e) { this.$changeLang(e); if(e == 'zh'){ //如果是中文：将中文缓存起来，并且赋值给全局的i18n对象的locale。完成切换。 localStorage.setItem('locale', 'zh') this.$i18n.locale = localStorage.getItem('locale') } else { localStorage.setItem('locale', 'en') this.$i18n.locale = localStorage.getItem('locale') } }, mounted() { const loginForm = Cookies.get("loginForm"); if (loginForm) { this.loginForm = JSON.parse(loginForm); } //用户每次刷新页面都判断 是否缓存过 语言，缓存过的话 选择其中显示的应该是缓存的语言 localStorage.getItem('locale') == 'zh' ? this.value = 'zh' : this.value = 'en' },

这段代码是一个Vue组件的方法和生命周期钩子函数。`changeLang`方法用来切换语言，它接收一个参数`e`，首先调用了一个名为`$changeLang`的方法，然后根据参数`e`的值判断是切换为中文还是英文。如果是中文，将中文缓存起来，并将其赋值给全局的i18n对象的locale属性，完成语言切换。如果是英文，则将英文缓存起来。`mounted`生命周期钩子函数在组件挂载之后执行，它首先获取名为"loginForm"的cookie，并将其解析为对象赋值给组件的`loginForm`属性。然后判断是否缓存过语言，如果缓存过且语言为中文，则将this.value设置为'zh'，否则设置为'en'。