vue前台（五）

 data() {
    return {
      //初始化搜索参数（收集搜索参数）
      //为搜索请求提供搜索参数
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
       : "",
        order: "1:desc",
        pageNo: 1,
        pageSize: 5,
        props: [],
        trademark: ""
      }
    };
  },

  methods: {
    getGoodsListInfo() {
      this.$store.dispatch("getGoodsListInfo", this.searchParams);
    },
    //处理searchParams参数
    handlerSearchParams() {
      //1、从路由中获取对应的params和query参数
      let { keyword } = this.$route.params;
      let {
        categoryName,
        category1Id,
        category2Id,
        category3Id
      } = this.$route.query;

      //2、拿到的这些参数都是可能有可能没有，需要判定，但是我们这次不判定直接全部放在一个新的对象当中
      //...拆包对象，其实是浅拷贝

      let searchParams = {
        ...this.searchParams,
        keyword,
        categoryName,
        category1Id,
        category2Id,
        category3Id
      };

      //3、过滤这个对象当中没有数据的属性项
      Object.keys(searchParams).forEach(item => {
        if (!searchParams[item]) {
          delete searchParams[item];
        }
      });

      this.searchParams = searchParams;
    },

 beforeMount() {
    //beforeMount 去同步更新data的searchParams数据
    this.handlerSearchParams()
  },

  mounted() {
    this.getreqGoodList();
  },

  methods: {
    getreqGoodList() {
      this.$store.dispatch("getGoodsListInfo",this.searchParams)
　　}

//请求search的商品搜索列表数据
// post  /api/list   data   //data如果是空的对象代表没有搜索条件，会返回所有商品信息
// searchParams为请求体参数
export const reqGoodsList = (searchParams) => Ajax.post('/list',searchParams)

import {reqGoodsList} from '@/api'

const state = {
  goodsListInfo:{}
}
const mutations = {
  //直接修改数据
  RECEIVEGOODSLISTINFO(state,goodsListInfo){
    state.goodsListInfo = goodsListInfo
  }
}

const actions = {
  //异步请求数据
  //searchParams是用来接收组件dispatch传递过来的参数对象
  //这个参数如果组件传递的就是一个数据，可以直接接收（什么数据类型都行）
  //如果这个参数需要接收多个数据，必须封装成对象传递过来

  async getGoodsListInfo({commit},searchParams){
    const result = await reqGoodsList(searchParams)
    if(result.code === 200){
      commit('RECEIVEGOODSLISTINFO',result.data)
    }
  }
}

const getters = {
//   如果在组件中，获取数据，a.b.c,可能读取不到，报错“Error in render: "TypeError: Cannot read property '0' of undefined"
// 模板在渲染时，获取不到属性值，解决方式，在vuex中getters配置，获取不到时返回空数组,此时就不会报错
  attrsList(state){
    return state.goodsListInfo.attrsList || []
  },
  goodsList(state){
    return state.goodsListInfo.goodsList || []
  },
  trademarkList(state){
    return state.goodsListInfo.trademarkList || []
  }
}

export default {
  state,
  mutations,
  actions,
  getters
}