需求:
如图 要求点击收藏 更新状态
image.png
思路:
后台给的数据是一个大数组courseData['hotCourse':{},'newCourse':{},recommendCourse:{},'storeData':[]];每一个课程是一个组件,在课程组件上绑定一个click事件collect,触发vuex的action事件collect,并传入当前课程的数据,调入收藏和取消收藏的接口,接口成功调用mutation改变state的storeData数据,页面依赖数据改变更新视图。
代码如下:
页面:
<div class="pro-list">
<proList
:list="$store.state.dataCourse"
@changePage="changePage" ref="proList"
:display="display"
@collect="collect" //组件定义的事件 collect:function(data){this.$store.dispatch('collect',data}},
@cancel="cancel">
</proList>
</div>
组件: (注意在collect事件上加上stop防止事件冒泡)
<template>
<div>
<ul v-if="list.length" class="data-hot">
<li v-for="(dataHot,index) in list" class="new-card" :key='index' @click.stop="$emit('changePage',dataHot)">
<div class="left mu-card-media">
<img :src='IMGURL+dataHot.course_picture' alt="">
<div class="modal"></div>
</div>
<div class="right">
<div class="title">{{dataHot.course_name}}</div>
<div>{{$store.state.counts}}</div>
<div class="data-hot-content new_content">{{dataHot.course_abstract}}</div>
<div class="dataHot-bottom card_bottom">
<span class="free" v-if="dataHot.pay">免费</span>
<span class="unfree" v-else>¥{{dataHot.course_price}}</span>
<div class="bottom-right">
<b v-if="display">
<span v-if="$store.state.storeData.indexOf(dataHot.course_id)==-1" class="collect" @click.stop="$emit('collect',dataHot)">收藏</span>
<span @click.stop="$emit('collect',dataHot)" class="collect isCollect" v-if="$store.state.storeData.indexOf(dataHot.course_id)!=-1">已收藏</span>
</b>
<span class="comment">{{dataHot.comment_num}}</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</template>
vuex:
const state={
storeData:{},
}
const mutation={
// 收藏
changeCollect(state,payload){
if(state.storeData.indexOf(payload)==-1){
state.storeData.push(payload);
}else{
let index=state.storeData.indexOf(payload)
state.storeData.splice(index,1)
}
},
}
const action={
// 收藏&取消收藏
collect({commit},data){
let isCollect=(url,data)=>{
axios.post('/index/Activityapi/'+url,{
course_id:data.course_id
}).then(res=>{
if(res.data.code==1){
commit('changeCollect',data.course_id)
}else{
Vue.prototype.$toast.error('收藏失败');
}
}).catch(err=>{
Vue.prototype.$toast.error('收藏失败');
})
}
if(localStorage.getItem('token')){
if(state.storeData.indexOf(data.course_id)==-1){
isCollect('storeup',data)
}else{
isCollect('cancelStore',data)
}
}else{
router.push('login')
}
},
}
网友评论