Vue商城历史记录功能实现

Vue商城历史记录功能实现

mounted 钩子函数

created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。

mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

methods:{
//搜索的方法 
 onSearch(val) {
      //onSearch用户回车搜索的时候执行，val就是用户输入的值
      // console.log("onSearch什么时候执行",val);
      this.blockShow = 3;
      console.log(this.historyListData);
      //将搜索的数据 添加到历史记录的集合中
      this.historyListData.unshift(val);
		/*将添加后的数据 存储到localStorage中
		后续将判断 该字段中是否有值存在
		如果不为空说明搜索过(将搜索的数据添加即可)
		*/
      localStorage.setItem(
        "keyWord",
        JSON.stringify(this.historyListData)
      );
      GetGoodsListData({
        keyword: val,
        page: 1,
        size: 10,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      }).then((res) => {
        if (res.errno == 0) {
          // console