餓了麼購物車功能

今天通過Vuex完成了基本的購物車功能，對Vuex的store和mutation有了進一步認識。

實現購物車所需要的資料

store作為可以全域性訪問的資料倉庫，滿足了我們在任意一個元件使用資料的需求。所以，我預先在store裡宣告三個變數：f_count陣列型別，cart_list陣列型別,cart_item 整數型別，以便在全域性呼叫。

1. 數字型別陣列 f_count ，儲存購物車內單個商品的數量；
2. 數字型別陣列 cart_list，儲存與商品數量對應的商品編號，即fid；
3. 整數 cart_item,購物車裡商品的總數量；
   程式碼如下：

   	 state:{
   		 f_count:
 
[],
   		 cart_list:[],
   		 cart_item:0
   	}

新增和刪除商品方法

main.js中

mutations:{
    //操作共享資料，只能用mutations提供的方法
    //如果元件要使用mutations定義的方法，只能使用 this.$store.commit('函式名');
    increment(state,i){ 
      //當前商品fid，在cart_list中的索引
      var tmp_index = state.cart_list.indexOf(i.fid);
      
      if(!state.cart_list.
 
includes(i.fid)){//如果商品未存在於cart_list，
        //則將商品物件加入cart_list
        //並且在f_count對應索引位置新增值
        state.f_count.push(1);
        state.cart_list.push(i.fid);
        
      }else{
        //如果商品已存在，則把f_count對應索引位置的值+1
        state.f_count[tmp_index]++;
      }      
    },
    subtract(state,i){
      var
 
 tmp_index = state.cart_list.indexOf(i.fid);
      state.f_count[tmp_index]--;
      if(state.f_count[tmp_index]==0){
        //刪除商品物件在f_count和cart_list中對應的值
        state.f_count.splice(tmp_index,1);
        state.cart_list.splice(tmp_index,1);
      }
    },
    //計算購物車內商品總件數 cart_item
    item_sum(state){
      if(state.f_count.length==1){
        state.cart_item = state.f_count[0];
      }else{
        state.cart_item =0;
        for(var n in state.f_count){
          state.cart_item+=state.f_count[n]
        }
      }
    }
  },
   
}

操作購物車元件 counter.vue

//模板部分
<template>
    <div class='active_btn'>
        <transition name="fade">
            <div class='del_cart' v-show='item.count'><div  @click='delCart(item)'>-</div></div>
        </transition>
        <span v-show="item.count">{{item.count}}</span>
        <div class='add_cart'><div @click="addCart(item)">+</div></div>
    </div>
</template>

import Vue from 'vue';

export default {
    data(){
        return{
        }
    },
    props:['item'],//從父元件接收傳值
	methods:{
	        addCart(item){
	            this.$store.commit('increment',item);    //改變狀態裡的f_count，購物車內商品數量
	            
	            //記錄單個商品的數量和值
	            if(!item.count){
	                Vue.set(item,'count',1);
	            }
	            else{
	                item.count++;
	            }
	            this.i_count=item.count;
	            this.$store.commit("item_sum");     //計算購物車內商品總件數
	        },
	        delCart(item){
	            this.$store.commit('subtract',item);
	            item.count--;
	            this.$store.commit("item_sum");
	        },
	    }
	}

點單頁面 shopDetails.vue
由於counter.vue是作為子元件巢狀在shopDetails.vue中的，所以必要的傳值不可少

<dl>
     <dt>
         <strong class='sort_tag'>熱銷</strong>
         <span>大家都喜歡1</span>
     </dt>
     <dd v-for='i in foodlist' :key='i.fid'>
         <div class='food_show'>
             <span class="food_img" > <img :src="i.f_img_sm" alt=""></span>
             <section class='food_info'>
                 <p class='food_name'>{{i.f_name}}</p>
                 <p class='food_sub'>{{i.summary}}</p>
                 <p class='food_sub'><span>月售{{i.sold_count}}份</span><span>好評率99%</span></p>
                 <div class='food_act'>
                     <span>每單限{{i.max_p}}份優惠</span>
                     <span class='rest'>剩{{i.rest_count}}份</span>
                 </div>
                 <section>
                     <span class='price'>
                         <span>{{i.min_p}}</span>
                         <span class='sale_base'>起</span>
                         <del class='old_price'>{{i.old_price}}</del>
                     </span>
                     <!-- <div class='active_btn'>
                         <div class='del_cart'><a v-show='i.count' @click='delCart(i)'>-</a></div>
                         <span>{{i.count}}</span>
                         <div class='add_cart'><a @click="addCart(i)">+</a></div>
                     </div> -->
                     <counter :item='i'></counter>
                 </section>
             </section>
         </div>
     </dd>
</dl>
...
<!-- 購物車預設收起狀態 -->
<div class='cart'>
    <div class='cart_img my_car'>
    		<div v-show='cart_item'>
    			<span>{{cart_item}}</span>
    		</div>
    </div>
    <div class='price_fee'>
        <p class='order_item' v-if='!cart_item'>未選購商品</p>
        <p v-else='cart_item.length'>{{cart_item}}</p>
        <p class='fee'>另需配送費3.8元</p>
    </div>
    <a class='pay_order'>￥20起送</a>
</div>

計算屬性獲取store中cart_item的值

computed:{
        cart_item(){
            return this.$store.state.cart_item;
        }
    },

最後實現效果，當新增商品時，單個商品數量，和商品總數量會相應改變。

明天計劃：
1.購物車展開詳情：商品單價，商品數量，總計，折扣
2.商品詳情頁：商品大圖，商品描述，價格，留言等