餓了么購物車功能

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

實現購物車所需要的數據

store作為可以全局訪問的數據倉庫，滿足了我們在任意一個組件使用數據的需求。所以，我預先在store里聲明三個變量：f_count數組類型，cart_list數組類型,cart_item 整數類型，以便在全局調用。

數字類型數組 f_count ，存儲購物車內單個商品的數量；

數字類型數組 cart_list，存儲與商品數量對應的商品編號，即fid；

整數 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對應索引位置的值+1state.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_itemitem_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.商品詳情頁：商品大圖，商品描述，價格，留言等

總結

以上是生活随笔為你收集整理的Vuex仿饿了么购物车功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。