vue实战-Search模块开发(大体步骤)

vue实战-Search模块开发

1.先静态页面+静态组件拆分

2.发请求（API）

在接口统一管理的index.js中添加搜索模块的接口

//搜索组件的接口
export const reqGetSearchInfo = (params) =>{
   
    return requests({
   url:'/list',method:'post',data:params})
}

3.vuex（三连环）

1）向服务器发请求获取数据

原先：

mounted(){
   
      this.$store.dispatch('getSearchList',{
   })
    },

①由于组件挂载完毕执行一次【只执行一次】，当再次传参发请求时，不能再派发action改变仓库的值，这不符合搜索模块的特性，于是将触发请求的语句封装为一个函数，需要时调用即可。
②传递的参数也要传给服务器用于筛选，不能只是空对象，可以在data中设置需要传递的值，将路由传递的参数动态的传递到data中的对象中，然后再发送给服务器，服务器返回符合的数据入仓库。于是需要在挂载调用派发actions时，就得将data中的对象确定好，可以用在生命周期mounted之前的beforeMount，或者beforeCreate。
最终：

data() {
   
      return {
   
        searchParams:{
   
          "category1Id": "",
          "category2Id": "",
          "category3Id": "",
          "categoryName": "",
          "keyword": "",
          "order": "",
          "pageNo": 1,
          "pageSize": 3,
          "props": [],
          "trademark":