Vue —— Search搜索组件

步骤

• 拆分静态组件（略）
  

写 Api 接口

• api/request.js

//对 axios 进行二次封装
import axios from "axios";

//引入进度条 nprogress 以及样式(可修改) 并在请求和响应拦截器中 调用 star 和 done 方法
import nprogress from 'nprogress';
import "nprogress/nprogress.css"


//1.利用axios对象的create,去创建一个axios实例
//2.request就是axios，只不过稍微配置一下
const requests = axios.create({
    //配置对象
    //基础路径，发请求的时候，路径当中会出现api
    baseURL:"/api",
    timeout:5000,
});

//请求拦截器
requests.interceptors.request.use((config)=>{
    //config：配置对象，对象里面有一个属性很重要，headers请求头
    //进度条开始
    nprogress.start();
    return config;
});

//响应拦截器
requests.interceptors.response.use(
    (res)=>{
        //响应成功的回调函数
        //进度条结束
        nprogress.done();
        return res.data;
    },
    (error)=>{
        //响应失败的回调函数
        return Promise.reject(new Error('faile'));
    })

    //暴露
    export default requests;

• api/index.js

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

vuex三连招

• store/search/index.js

//引入接口
import { reqGetSearchInfo } from "@/api"
//search 模块的小仓库
const state = {
    //仓库初始状态
    searchList: {}
}
const mutations = {
    GETSEARCHLIST(state,data){
        state.searchList = data;
    }
}
const actions = {
    //获取 search 模块数据
    async getSearchList({ commit }, params = {}) {
        let result = await reqGetSearchInfo(params);
        if (result.code == 200) {
            commit("GETSEARCHLIST", result.data);
        }
    },

}
const getters = {
    goodsList(state){
    	//记住：|| [] ，避免没网络而传递一个 undefine，因为没网络searchList是空对象
        return state.searchList.goodsList || [];
    },
    trademarkList(state){
        return state.searchList.trademarkList || [];
    },
    attrsList(state){
        return state.searchList.attrsList || [];
    }


}
export default {
    state,
    mutations,
    actions,
    getters
}

去 search 组件发请求并获取数据

• search 组件

<script>
import { mapGetters } from "vuex";
import SearchSelector from "./SearchSelector/SearchSelector";
export default {
  name: "Search",
  data() {
    return {
      //带给服务器参数，看 API 接口文档
      searchParams: {
        // 1 级分类id
        category1Id: "",
        // 2 级分类id
        category2Id: "",
        // 3 级分类id
        category3Id: "",
        // 分类名字
        categoryName: "",
        // 关键字
        keyword: "",
        // 排序
        order: "",
        // 分页的第几页
        pageNo: 1,
        // 每页的条数
        pageSize: 10,
        // 平台售卖属性操作带的数据
        props: [],
        // 品牌
        trademark: "",
      },
    };
  },
  components: {
    SearchSelector,
  },
  beforeMount() {
    //Object.assign: ES6新增语法 ==> 合并对象
    //在发请求之前，把接口需要传递的参数，进行整理（再给服务器发请求之前，把参数整理好，服务器就会返回查询的数据）
    Object.assign(this.searchParams,this.$route.query,this.$route.params);
  },
  mounted(){
    this.getData();
    //每一次请求完毕，应该把123级分类id置空，让他接收下次请求相对应123级分类id
      this.searchParams.category1Id='';
      this.searchParams.category2Id='';
      this.searchParams.category3Id='';
  },
  computed: {
    //mapGetters 里面的写法，因为 getters 计算是没有划分模块的
    ...mapGetters(["goodsList"]),
  },
  methods: {
    //由于搜索功能，向服务器发请求获取search模块数据，会根据每次传递的参数获取不同的数据进行展示，所以dispatch不能放 mounted 里面
    getData() {
      this.$store.dispatch("getSearchList", this.searchParams);
    },
  },
  //监听搜索条件参数 searchParams 的变化，变化时按提交重新发请求
  watch: {
    //监听路由信息是否变化，变化直接再次发请求
    $route(newValue,oldValue){
      //再次发起请求前也要整理带给服务器的参数
      Object.assign(this.searchParams,this.$route.query,this.$route.params);
      //发起请求
      this.getData();
      //每一次请求完毕，应该把123级分类id置空，让他接收下次请求相对应123级分类id
      this.searchParams.category1Id='';
      this.searchParams.category2Id='';
      this.searchParams.category3Id='';
    }   
  }
};
</script>

展示动态数据（略）