vue購物車元件設計結構

購物車原型圖

從功能上拆分層次

盡量讓元件原子化
容器元件（只管理資料）vuex

該功能拆分成兩個元件，頂部是商品列表，底部是購物車商品

功能上1.點選加入購物車，底部購物車新增商品（或者是已有商品，數量加1即可）

2.點選增加按鈕，數量加一，點選減少，數量減1

資料結構上

1.有兩種資料，一種是商品列表資料，有商品id,商品名稱，商品**。另一種是購物車資料，有商品id,商品名稱，數量

邏輯分析

1.點選新增到購物車商品，將商品id傳遞過去，然後在資料元件（總元件中）對資料處理，通過id來給cartlist陣列新增一條新資料（沒有相同id,新增，有相同id,數量加1）

2.cartlist和productionlist傳遞給cart元件，通過id來計算乙個新資料list(因為cartlist沒有商品名稱)，總價也可以計算出來

3.點選新增按鈕，也通過id來判斷陣列中的數量加1， 點選減少，來判斷陣列中數量減1

總結；通過商品id來處理陣列中的資料，利用陣列中的各種方法，用到了事件匯流排，子向父傳遞資料

總元件index.vue

"

productionlist
"/>
:productionlist="
productionlist
":cartlist="
cartlist
" />

v-for="

item in list
":key="
item.id
":item="
item
" />

}

}元  
"#" @click="
clickhandler(item.id, $event)
">加入購物車

v-for="

item in list
":key="
item.id
":item="
item
" />
總價 }

}

(數量 }) "#
" @click="
addclickhandler(item.id, $event)
">增加 "#
" @click="
delclickhandler(item.id, $event)
">減少

vuex模組拆分，模組拆分，如何獲取資料；參考；

vuex資料

總store

import vue from

'vue
'import vuex 
from
'vuex
'import cart 
from
'./modules/cart
'import products 
from
'./modules/products
'import createlogger 
from
'../../../src/plugins/logger
'vue.use(vuex)
const debug = process.env.node_env !== '
production
'export 
default
newvuex.store(,
strict: debug,
plugins: debug ?[createlogger()] : 
})

import shop from

'../../api/shop'//
initial state
const state =
//getters
const getters ={}
//actions —— 非同步操作要放在 actions
const actions =) )
}}//mutations
const mutations =,
//減少某乙個商品的庫存（夠買乙個，庫存就相應的減少乙個，合理）
decrementproductinventory (state, ) 
}export 
default

import shop from

'../../api/shop'//
initial state
//shape: 
const state =, ]
//注意，購物車只儲存 id 和數量，其他商品資訊不儲存
items: ,
//結賬的狀態 - null successful failed
checkoutstatus: null}//
getters
const getters =) =>
})},
//所有購物車商品的**總和
carttotalprice: (state, getters) =>, 0)
}}//actions —— 非同步操作要放在 actions
const actions =, products) )
//請求介面
shop.buyproducts(
products,
() => commit('
setcheckoutstatus
', '
successful
'), //
設定結賬的狀態 successful
() =>)})
},//
新增到購物車
//【注意】這裡沒有非同步，為何要用 actions ？？？—— 因為要整合多個 mutation
//mutation 是原子，其中不可再進行 commit ！！！
addproducttocart (, product) )
} else
//remove 1 item from stock 減少庫存
commit('
products/decrementproductinventory
', , )}}}
//mutations
const mutations =) )
},//
商品再次被新增到購物車，增加商品數量
incrementitemquantity (state, ) ,
//設定購物車資料
setcartitems (state, ) ,
//設定結算狀態
setcheckoutstatus (state, status) 
}export 
default

"

">

class="

cart
">"
!products.length
">please add some products to cart.
total: }
"!products.length
" @click="
checkout(products)
">checkout
"checkoutstatus
">checkout }.

購物車元件開發

box sizing屬性允許您以特定的方式定義匹配某個區域的特定元素。例如，假如您需要併排放置兩個帶邊框的框，可通過將 box sizing 設定為 border box 這可令瀏覽器呈現出帶有指定寬度和高度的框，並把邊框和內邊距放入框中。selectfoods props selectfoods ...

外賣專案底部購物車元件編寫

底下購物車一共有三種樣式 未選商品樣式 已選商品但未到起送價樣式 已經到達起送價的樣式 首先這購物車的三種不同的樣式，都需要從外部獲取資料，也就是拿到food元件選擇的商品和商品的總價，由於購物車是food元件的子元件，所以可以在food元件裡把起送費和配送費傳遞進去 在購物車元件中接收這兩個引數，...

購物車設計

購物車設計 最近接觸了下購物車，發現購物車裡面的內容還是比較繁瑣的，乙個合理的設計實在是必不可少的，所以查了下資料，也結合自己的一些理解，小小總結了下 補充一點 好的資料庫表設計是任何實現的基礎 1.什麼是購物車？實物 去超市看看，簡單理解為能裝貨物的推車 購物籃 網際網路 虛擬購物車，存放虛擬貨品...