vue+vuex+axios做收藏功能

需求：
如图 要求点击收藏 更新状态

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')
  }
  },
}