VUE项目--Search组件

一、拆分组件

二、写api，获取后台数据

// 获取搜索模块数据  地址：/api/list  请求方式：post  参数：需要带参数
// 当前接口（获取搜索模块数据），给服务器传递一个默认参数【至少是一个空对象】
export const reqGetSearchInfo = (params) => requests({
    url: "/list",
    method: "post",
    data: params
})

三、Vuex存储数据，模块化管理

import { reqGetSearchInfo } from '@/api'
const state = {
    searchList: {}
}
const mutations = {
    GETSEARCHLIST(state, searchList) {
        state.searchList = searchList
    }
}
const actions = {
    // 1. 获取search模块数据
    async getSearchList({ commit }, params = {}) {
        // reqGetSearchInfo在调用获取服务器数据的时候，至少传递一个参数（空对象）
        // params形参：当用户派发action的时候，第二个参数传递过来的，至少是一个空对象
        let result = await reqGetSearchInfo(params)
        if (result.code == 200) {
            commit("GETSEARCHLIST", result.data)
        }
    }
}
// 计算属性：作用是简化仓库中的数据
// 将来在组件中获取会方便
const getters = {
    // 当前形参state：当前仓库中的state
    goodsList(state) {
        // state.searchList。goodsList如果服务器数据回来，应该是一个数组
        // 如果网络不好或没有网络，state.searchList.goodsList返回undefined
        // 所有，计算新的属性的属性值至少有一个数组
        return state.searchList.goodsList || []
    },
    trademarkList(state) {
        return state.searchList.trademarkList
    },
    attrsList(state) {
        return state.searchList.attrsList
    }
}
export default {
    state,
    mutations,
    actions,
    getters,
}

四、组件调用

1. 向服务器请求获取search模块数据，根据参数不同返回不同的数据进行展示

  methods:
    // 将该请求封装为一个函数：在需要的时候调用
    getSearchData() {
      this.$store.dispatch("getSearchList", this.searchParams);
    },
 },
 //挂载后调用
  mounted() {
    this.getSearchData();
  },

2. watch监听路由的变化发请求

当已经处于search页面，只是改变路由参数信息时，路由不会跳转，需进行处理；
当改变搜索框内容，再点搜索按钮， 路由信息会发生变化，所以通过监听路由信息可以完成路由跳转。

  watch: {
    // 监听路由的信息是否发生变化，如果发生变化，再次发起请求
    $route() {
      // 每一次请求完毕，应该把相应的1,2,3级分类的id置空，让他接受下一次相应的1,2,3
      // 再次发起请求之前，整理带给服务器参数
      Object.assign(this.searchParams, this.$route.query, this.$route.params);

      // 发起ajax请求
      this.getSearchData();

      // 分类名字和关键字不用清理：因为每一次路由发生变化的时候，都会重新赋予新的数据
      // 此时category1Id、category2Id、category3Id由于每次请求只会给其中一个赋值，这也就表示如下上次请求和这次请求的级别不同，上次请求的数据就会保留。所以要手动赋空值
      // 赋值undefined而不是空字符串是因为空置依然会带给网络请求，增加网络负载;undefined不会被带给服务器
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;
    },
  },

3. 关于分类、品牌、关键字等的显示与删除

  <ul class="fl sui-tag">
    <!-- 分类的面包屑 -->
    <li class="with-x" v-if="searchParams.categoryName">
      {{ searchParams.categoryName
      }}<i @click="removeCategoryName">×</i>
    </li>
    <!-- 关键字的面包屑 -->
    <li class="with-x" v-if="searchParams.keyWord">
      {{ searchParams.keyWord }}<i @click="removeKeyWord">×</i>
    </li>
    <!-- 品牌的面包屑 -->
    <li class="with-x" v-if="searchParams.trademark">
      {{ searchParams.trademark.split(":")[1]
      }}<i @click="removeTrademark">×</i>
    </li>
    <li
      class="with-x"
      v-for="(attrItem, index) in searchParams.props"
      :key="index"
    >
      {{ attrItem.split(":")[1]
      }}<i @click="removeAttrItem(index)">×</i>
    </li>
  </ul>

split(’.’)方法将字符串以"."开割形成一个字符串数组，然后再通过索引[1]取出所得数组中的第二个元素的值

    // 删除分类的名字
    removeCategoryName() {
      // 把带给服务器的数据置空了，还需要向服务器发请求
      this.searchParams.categoryName = undefined;
      this.searchParams.category1Id = undefined;
      this.searchParams.category2Id = undefined;
      this.searchParams.category3Id = undefined;

      this.getSearchData();

      // 地址栏也需要修改：进行路由跳转
      if (this.$route.params) {
        this.$router.push({ name: "search", params: this.$route.params });
      }
    },
    removeKeyWord() {
      //给服务器带的参数searchParams的keyword置空
      this.searchParams.keyWord = undefined;
      //再次发请求
      this.getSearchData();
      //通知兄弟组件Header清除关键字
      this.$bus.$emit("clear");
      //进行路由的跳转
      if (this.$route.query) {
        this.$router.push({ name: "search", query: this.$route.query });
      }
    },

带给服务器的参数说明：该参数是可有可无的，如果属性值为空的字符串还是会把相应的字段带给服务器；
把相应字段改为undefined，当前字段不会带给服务器

4. 关于价格排序

  <ul class="sui-nav">
  // 动态添加类名，给标签添加背景色：区分开综合与价格
     <li :class="{ active: isOne }" @click="changeOrder('1')">
       <a href="#"
         >综合<i
           v-show="isOne"
           class="iconfont"
           :class="{
             'icon-direction-down': isDesc,
             'icon-direction-up': isAsc,
           }"
         ></i
       ></a>
     </li>
     <li :class="{ active: isTwo }" @click="changeOrder('2')">
       <a href="#"
         >价格<i
           v-show="isTwo"
           class="iconfont"
           :class="{
             'icon-direction-down': isDesc,
             'icon-direction-up': isAsc,
           }"
         ></i
       ></a>
     </li>
   </ul>

    // 排序的操作
    changeOrder(flag) {
      // flag形参：它是一个标记，代表用户点击的是综合（1）价格（2）【用户点击的时候传递进来的】
      let originOrder = this.searchParams.order;
      // 获取最开始的状态
      let originFlag = originOrder.split(":")[0];
      let originSort = originOrder.split(":")[1];
      // 准备一个新的order的属性值
      let newOrder = "";
      // 点击的是综合
      if (flag == originFlag) {
        newOrder = `${originFlag}:${originSort == "desc" ? "asc" : "desc"}`;
      } else {
        // 点击的是价格
        newOrder = `${flag}:${"desc"}`; //默认是降序
      }
      // 将新的order赋予searchParams
      this.searchParams.order = newOrder;

      this.getSearchData();
    },