【Vue2项目(尚品汇前台)】(三）Search搜索模块搭建

一、模块开发步骤

1. 静态页面+静态组件拆分
2. 发请求（API）
3. vuex三连环
4. 组件获取仓库数据，动态展示数据

二、拆分组件

三、请求数据、展示数据

1、请求数据（写api【vuex三连环】）

2、展示数据

（1）配置getters，简化数据

这种写法太过长，容易出事
解决方案：小仓库里的getters

getters主要的作用是：简化仓库中的数据
可以把我，em将来在组件当中需要用到的数据简化一下【获取的时候就方便】

const getters = {
   
    goodsList(state){
   
        return state.searchList.goodsList;
    },
    trademarkList(state){
   
        return state.searchList.trademarkList;
    },
    attrsList(state){
   
        return state.searchList.attrsList;
    }
}

这种写法可以，但是有一个问题，当网络断的时候，因为获取不到goodsList这些，那返回的就会是undefined
解决方案：

const getters = {
   
    //假如网络不给力，至少也返回一个空数组
    goodsList(state) {
   
        return state.searchList.goodsList || [];
    },
    trademarkList(state) {
   
        return state.searchList.trademarkList || [];
    },
    attrsList(state) {
   
        return state.searchList.attrsList || [];
    }
}

（2）渲染展示数据

四、根据不同的参数获取数据展示

1、封装派发actions函数

当我们点击一次搜索之后，Searchmounted挂载函数执行了一次，所以里面的派发actions也执行了一次，而当我们再次点击一次搜索之后，mounted不会再次执行了，所以actions也不会在执行，所以我们应该把派发actions请求的操作封装成函数，在需要时候调用。

2、设置参数默认值

2、设置参数默认值

2、object.assign()合并对象

Object.assign(target, source)方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。

var target={
   name:'zh',age:22};
var source={
   state:'single'}
var result=Object.assign(target,source);//{name:"zh",age:22,state:"single"}

3、利用路由信息变化实现动态搜索

beforeMount(){
   
    Object.assign(this.searchParams,this.$route.query,this.$route.params)
  },

在搜索中或者三级联动中拿到query值和params值，然后拿到不同的数据，这里要在mounted之前，所以我们选择在beforeMount中（created也可以），

五、Search模块子组件动态开发

六、改进动态搜索功能

前面我们已经实现了关键字搜索功能，但是会发现一个问题，就是他只能搜索一次，再次搜索的话没有反应
解决方案：使用watch监听，监测$route发生改变的话，就再次发起请求

watch:{
   
    //监听路由的信息是否发生变化，如果发生变化，再次发起请求
    $route(newValue