vuejs的數據倉庫vuex官方github購物車案例分析

案例鏈接

商品列表展示

從商品列表到購物車

添加商品到購物車-行動

設置結帳狀態

判斷商品庫存含量:

如果沒有庫存了: 什麼也不做

如果還有庫存: 在購物車中看看查找這個物品,如果不存在,將商品推送到購物車,如果存在,增加商品的數量。之後減少商品的庫存。

將商品推向購物車-變異
增加商品的數量-變異
減少商品的庫存-變異


購物車中的變化

購物車中所有的商品-獲得者
購物車中物品總價格-獲得者

結帳

展示結賬狀態

成功還是失敗和無狀態三種。

是否允許提交?

購物車沒有商品時不可提交

結帳-行動

儲存購物欄物品
設置結帳狀態-變異

無狀態

設置購物欄物品-變異

清空購物欄

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章