【Vue项目】尚品汇（四）Search组件开发

Search模块开发

分析：1）编写静态页面

2）编写api

3）编写vuex三大件

4）组件获取仓库数据，并进行动态展示

1 SearchSelector

1 编写api

export const reqGetSearchInfo = (params={}) => {
    return requests({
        url: '/list',
        method: 'post',
        data: params
    })
}

2 编写Vuex三大件

import {reqGetSearchInfo} from "@/api";
const actions = {
    async getSearchInfo(context, params) {
        let result = await reqGetSearchInfo(params)
        if(result.code == 200) {
            context.commit('GETSEARCHINFO', result.data);
        }
    }
}
const mutations = {
    GETSEARCHINFO(state, searchInfoList) {
        state.searchInfoList = searchInfoList
    }
}
const getters = {

}
const state = {
    searchInfoList: {}
}

// 将模块仓库内容对外暴露
export default {
    state,
    actions,
    mutations,
    getters
}

注意state仓库的数据是对象{}还是数组[]是由返回的数据决定的。

3 组件获取仓库数据，并进行动态展示

    mounted() {
      this.$store.dispatch('getSearchInfo');
    },
    computed: {
      ...mapState({
        SearchInfoList: (state) => {
          return state.search.searchInfoList
        }
      })
    }

4 监听路由变化再次发送请求数据

之前通过三级联动的query参数整合了搜索框中的params参数，当点击三级联动的时候能够带上搜索框的参数，当点击搜索框的时候能带上三级联动的参数。但是在进入搜索页面之后并不能继续进行发出请求，这是因为我们只在mounted里面进行了整理参数、发出请求（实际是在vuex的action中）。

因此我们可以通过监听路由的变化，当路由变化的时候重新进行参数整理和请求发送即可。

<script>
  import SearchSelector from './SearchSelector/SearchSelector'
  import {mapState} from "vuex";
  export default {
    name: 'Search',
    components: {
      SearchSelector
    },
    data() {
      return {
        searchParams: {

        }
      }
    },
    methods: {
      getData() {
        this.$store.dispatch('getSearchInfo', this.searchParams);
      }
    },
    mounted() {
      this.getData();
    },
    beforeMount() {
      Object.assign(this.searchParams, this.$route.query, this.$route.params)
    },
    computed: {
      ...mapState({
        SearchInfoList: (state) => {
          return state.search.searchInfoList
        }
      })
    },
    watch: {
      $route() {
        console.log("123")
        Object.assign(this.searchParams, this.$route.query, this.$route.params)
        this.getData()
        this.searchParams = {}
      }
    }
  }
</script>

各种请求接口参数一定要注意参照接口文档。。。

对路由的监视一定要加上 this.searchParams = {}，防止在重复点击三级联动的时候会携带上次的三级分类的剩余信息

从后面回来的，这里还真不能直接这么写，因为后面面包屑会用到categoryName，否则再次点击三级联动会导致面包屑不显示。应该改为：

      $route() {
        Object.assign(this.searchParams, this.$route.query, this.$route.params)
        console.log(this.searchParams)
        this.getData()

        this.searchParams.category1Id = ''
        this.searchParams.category2Id = ''
        this.searchParams.category3Id = ''
      }

2 面包屑

3 平台售卖属性

4 商品排序

5 分页器

分页器需要的参数：

• 当前的页码：pageNo

• 每页的数据：pageSize

• 分页器的总页数：total

• 分页器连续页码个数：continue