当前位置：首页 > news >正文

vue实战-Search模块开发(大体步骤)

news 来源：原创 2024/5/6 7:19:21

vue实战-Search模块开发

1.先静态页面+静态组件拆分

2.发请求（API）

在接口统一管理的index.js中添加搜索模块的接口

//搜索组件的接口
export const reqGetSearchInfo = (params) =>{
    return requests({url:'/list',method:'post',data:params})
}

3.vuex（三连环）

1）向服务器发请求获取数据

原先：

mounted(){
      this.$store.dispatch('getSearchList',{})
    },

①由于组件挂载完毕执行一次【只执行一次】，当再次传参发请求时，不能再派发action改变仓库的值，这不符合搜索模块的特性，于是将触发请求的语句封装为一个函数，需要时调用即可。
②传递的参数也要传给服务器用于筛选，不能只是空对象，可以在data中设置需要传递的值，将路由传递的参数动态的传递到data中的对象中，然后再发送给服务器，服务器返回符合的数据入仓库。于是需要在挂载调用派发actions时，就得将data中的对象确定好，可以用在生命周期mounted之前的beforeMount，或者beforeCreate。
最终：

data() {
      return {
        searchParams:{
          "category1Id": "",
          "category2Id": "",
          "category3Id": "",
          "categoryName": "",
          "keyword": "",
          "order": "",
          "pageNo": 1,
          "pageSize": 3,
          "props": [],
          "trademark": ""
        }
      }
    },
    beforeMount(){
      Object.assign(this.searchParams,this.$route.query,this.$route.params)
    },
    mounted(){
      this.getData()
    },
     computed:{
      ...mapGetters([ 'goodsList' ])
    },
    methods: {
      getData(){
        this.$store.dispatch('getSearchList',this.searchParams)
      }
    },

2）search模块下的仓库

//search下的小仓库
import { reqGetSearchInfo } from "@/api"
const state={
    searchList:{}
}
const mutations={
    GETSEARCHLIST(state,searchList){
        state.searchList = searchList
    }
}
const actions={
    async getSearchList({commit},params={}){
        const result = await reqGetSearchInfo(params)
        if(result.code == 200){
            commit('GETSEARCHLIST',result.data)
        }
    }
}
const getters={
//这个state是search下小state
    goodsList(){
        return state.searchList.goodsList || []//防止没网时返回undefined
    },
    attrsList(){
        return state.searchList.attrsList
    },
    trademarkList(){
        return state.searchList.trademarkList
    }
}

export default {
    state,
    mutations,
    actions,
    getters
}

4.组件获取仓库数据，动态展示数据

1）组件获取仓库数据

根据仓库里的计算方法getters简化组件数据
首先在Search下引入

import { mapGetters } from 'vuex'

获取计算属性得到的值用数组表示

computed:{
      ...mapGetters([ 'goodsList','attrsList','trademarkList' ])
    }

2）动态展示数据

 <div class="goods-list">
            <ul class="yui3-g">
              <li class="yui3-u-1-5" v-for="good in goodsList" :key="good.id">
                <div class="list-wrap">
                  <div class="p-img">
                    <a href="item.html" target="_blank">
                      <img :src="good.defaultImg" />
                    </a>
                  </div>
                  <div class="price">
                    <strong>
                      <em>¥</em>
                      <i>{{good.price}}.00</i>
                    </strong>
                  </div>
                  <div class="attr">
                    <a target="_blank" href="item.html" title="促销信息，下单即赠送三个月CIBN视频会员卡！【小米电视新品4A 58 火爆预约中】">{{good.title}}</a>
                  </div>
                  <div class="commit">
                    <i class="command">已有<span>2000</span>人评价</i>
                  </div>
                  <div class="operate">
                    <a href="success-cart.html" target="_blank" class="sui-btn btn-bordered btn-danger">加入购物车</a>
                    <a href="javascript:void(0);" class="sui-btn btn-bordered">收藏</a>
                  </div>
                </div>
              </li>
            </ul>
          </div>