美文网首页
vue+vuex+axios做收藏功能

vue+vuex+axios做收藏功能

作者: echo三文鱼 | 来源:发表于2019-01-03 10:54 被阅读0次

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


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

    相关文章

      网友评论

          本文标题:vue+vuex+axios做收藏功能

          本文链接:https://www.haomeiwen.com/subject/autfrqtx.html