【Vue项目心得笔记】Search模块开发（一般的四个步骤）

（1）先静态页面+静态组件

（2）发请求（API）

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

 （3）vuex三连环

import { reqGetSearchInfo } from "@/api"
//search模块的小仓库
//state：仓库存储数据的地方
const state = {
    searchList:{}
}
//mutations：修改state的唯一手段
const mutations = {
    GETSEARCHLIST(state,searchList){
        state.searchList = searchList
    }
}
//actions：处理action,可以书写自己的业务逻辑，也可处理异步
const actions = {
    //获取search模块数据
    async getSearchList({commit},params={}){
        //当前这个reqgetsearchinfo这个函数在调用服务器数据的时候，至少要传递一个参数
        //params：是当前用户派发action的时候，第二个参数传递过来的 至少是一个空对象
        let result = await reqGetSearchInfo(params)
        if(result.code==200){
            commit("GETSEARCHLIST",result.data)
        }
    }
}
//getters:理解为计算属性，用于简化仓库数据，让组件获取仓库的数据更加方便
const getters = {}


export default {
    state,
    mutations,
    actions,
    getters
}

测试接口的数据格式： 在组件里面

 （4）组件获取仓库数据，动态展示数据

监听路由的变化，再次发送请求获取数据

    watch:{
      //监听路由的信息是否发生变化，如果发生变化，再次发送请求
      $route(newValue,oldValue){
        //再次发送请求之前整理带给服务器的数据
        Object.assign(this.searchParams,this.$route.query,this.$route.params)
        //再次发送ajax请求
        this.getData()
        //每次请求完毕，应该把相应的123级分类的id置空，让他接收新的id
        this.searchParams.category1Id=''
        this.searchParams.category2Id=''
        this.searchParams.category3Id=''
      }
    }