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>