vue尚品汇-search组件

1,在api获取数据接口 (也包括了之前的轮播图,三级联动等等, 全部复制过来看的清除一点)

src\api\index.js第一次带参数

//导入刚才写好的axios二次封装的requests
import requests from "./ajax";
import mockRequests from "./mockAjax"
//三级联动接口
///api/product/getBaseCategoryList get 无参数
//发请求：axios发请求返回结果promise对象
export const reqCategoryList = ()=>{
	//由于前面配置了基础路径，所以不用加/api
	return requests({url:'/product/getBaseCategoryList',method:'get'})
}
//Search组件，获取商品列表接口,params是参数，post方式传递
export const reqSearchList = (params)=>{
	//由于前面配置了基础路径，所以不用加/api
	return requests({url:'/list',method:'post',data:params})
}

// 获取轮播图，mockjs模拟数据
export const reqBannerList = ()=>{
	// return mockRequests.get('/banner');
	return mockRequests({url:'/banner',method:'get'})
}

// 获取楼层，mockjs模拟数据
export const reqFloorList = ()=>{
	return mockRequests({url:'/floor',method:'get'})
}

2，在仓库(store)发送请求, 不过之前都是在home仓库中进行, 这里要在search里写src\store\search\index.js

import { reqSearchList } from "@/api"

const state = {
  searchList:{}
}
const mutations = {
  GETSEARCHLIST(state,searchList){
    state.searchList = searchList
  },
}
const actions = {
  // 产品列表
  async getSearchList({commit},params={}){
    let result = await reqSearchList(params)
    // console.log(result);
    if(result.code == 200){
      commit('GETSEARCHLIST',result.data)
    }
  }
}
// 计算属性
// getters主要作用：简化仓库中的数据，将来组件中获取数据方便
const getters = {
  // 当前形参state,是当前仓库中的state，不是大仓库中的state
  goodsList(state){
    return state.searchList.goodsList || [] // 万一网络慢，没有返回数据，至少给前端遍历的时候一个空数组[]
  },
  attrsList(state){
    return state.searchList.attrsList || []
  },
  trademarkList(state){
    return state.searchList.trademarkList || []
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}

3，在组件内(search)派发action, 获取仓库数据src\pages\Search\index.vue

<script>
import {mapGetters} from 'vuex'
import SearchSelector from './SearchSelector'

export default {
  name:'Search',
  components:{
    SearchSelector
  },
  data() {
    return {
      searchParams:{
        // 1, 2, 3, 级分类的id, 从home跳转到search时传入
        category1Id: "",
        category2Id: "",
        category3Id: "",
        // 分类名字, 关键字
        categoryName: "",
        keyword: "",
        // 排序
        order: "",
        // 分页器, 代表当前是第几页
        pageNo: 1,
        // 代表每一个展示数据的个数
        pageSize: 3,
        // 平台售卖属性操作带的参数
        props: [],
        // 品牌
        trademark: "",
      }
    }
  },
  beforeMount() {  //在挂载之前合并参数-仅执行一次，参数变化多次搜索还得想别的办法
    // 复杂的写法
    // this.searchParams.category1Id = this.$route.query.category1Id;
    // this.searchParams.category2Id = this.$route.query.category2Id;
    // this.searchParams.category3Id = this.$route.query.category3Id;
    // this.searchParams.categoryName = this.$route.query.categoryName;
    // this.searchParams.keyword = this.$route.query.keyword;
    Object.assign(this.searchParams, this.$route.query, this.$route.params);
    // console.log(this.searchParams, this.$route.query, this.$route.params);
  },
  mounted() {
    // 放在挂载中，只会执行一次
    // this.$store.dispatch('getSearchList')
    // 所以需要把向服务器请求数据封装成一个函数，根据不同参数多次请求
    this.getData()
  },
  computed:{
    ...mapGetters(['goodsList'])
  },
  methods:{
    // 向服务器发送请求，获取search模块数据
    getData(){
      this.$store.dispatch('getSearchList',this.searchParams)
    }
  },
  // 数据监听: 监听组件实例身上的属性的属性值变化 
  watch: {
    // 监听路由的信息是否发生变化, 如果发生变化, 则再次发起请求
    $route(newValue, oldValue) {
      // 再次发请求之前整理带给服务器参数
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      // 在次发送 ajax请求
      this.getData()
      console.log(this.searchParams, this.$route.query, this.$route.params);  
      //如果下一次搜索时只有params参数，拷贝后会发现searchParams会保留上一次的query参数
      //所以每次请求结束后将相应参数制空
      this.searchParams.category1Id = ''
      this.searchParams.category2Id = ''
      this.searchParams.category3Id = ''
    },
  } 

}
</script>