vue购物车功能怎么实现,vue写的购物车详细步骤
本文主要介绍了通过Vue实现淘宝购物车三级选择的功能。文中详细讲解了实现过程，对我们学习Vue有帮助。有兴趣的可以看看。
最近在实践商城项目中，记录了实现三级购物车选择的过程(一个小白，水平非常好)。
效果图：
实施：
1.全选时选择所有商品店铺；否则，取消选中全部。
2.选中店铺时，选中当前店铺的所有商品；否则取消选中。
3.店内商品全部选中选中的店；否则，取消选中该商店。
4.选择店内所有商品全选按钮；否则取消选中。
首先我用vuex管理购物车数据，所有改变按钮状态的方法都是用mutaition写的。
常量状态={
购物车列表：[]，//购物车列表
总数：0，
AllChecked: false，//全选
Checkednum: 0，//所选商店的数量
/**
*目录表：[
* {
*商店名称，
* shopChecked: false，//店铺被选中。
* proCheckedNum: 0，//当前店铺商品的选定数量
* cartGoodsInfo: [
* {IID，风格名称，预先检查.}//有商品的各种信息，prochecked是商品的选中状态。
* {.}
* ]
* },
* {.}
* ]
*/
};
选择html按钮部分。
//这是选择按钮，我把它封装成一个组件chooseClass。它接收父组件传递的值，并在被选中时更改样式。
//商品的选中按钮
推车选择
:choose class= $ store . state . cart list[index]。产品[答案]。“预先检查”
@ click . native . stop= prochecked click(index，key)
/
//商店的选择按钮(我把商店列表和商品分成两个组件，索引传递给商店列表中的商品)
推车选择
:index=index
:choose class= $ store . state . cart list[index]。商店检查
@ click . native= shopCheckedClick(index)
/
//全选按钮
cart-choose:choose class= $ store . state . all checked /
单击商品、商店和选择所有按钮的方法。
//index:商店索引值key:当前商店中当前商品的索引值
proCheckedClick(index，key) {
这个。$store.dispatch(ProChecked ，{ index，key })；
},
shopCheckedClick(索引){
这个。$store.dispatch(ShopChecked ，index)；
},
allChecked() {
这个。$ store . dispatch( all checked )；
},
突变
//选择单个商品
proCheckedTrue(state，{ index，key }) {
const cart list=state . cart list；
目录[索引]。产品[答案]。proChecked=true
目录[索引]。proCheckedNum=1；//商品数量1
},
//取消选中单个商品。
proCheckedFalse(state，{ index，key }) {
const cart list=state . cart list；
目录[索引]。产品[答案]。proChecked=false
目录[索引]。proCheckedNum-=1；
},
//选择商店
shopCheckedTrue(state，index) {
const cart list=state . cart list；
目录[索引]。shopChecked=true
console . log(state . shopcheckednum)；
state . shopcheckednum=1；//商店数量1
},
//取消选择该商店。
shopCheckedFalse(state，index) {
const cart list=state . cart list；
目录[索引]。shopChecked=false
state . shopcheckednum-=1；
},
//全选
allCheckedTrue(state) {
state.allChecked=true
},
//取消全选
allCheckedFalse(州){
state.allChecked=false
},
因为方法涉及到一些逻辑判断，所以我把所有的逻辑判断都放在了行动上。
//商品状态
预检查({状态，提交}，{索引，关键字}) {
const cart list=state . cart list；
//这里有必要反过来，因为此时的proChecked是在点击按钮之前。
！目录[索引]。产品[答案]。预先检查
？commit(proCheckedTrue ，{ index，key })
:commit(proCheckedFalse ，{ index，key })；
//选中所有商品，选中的店铺被选中。
if (cartList[index].proCheckedNum===cart list[index]. products . length){
commit(shopCheckedTrue ，index)；
}
//不是所有商品都选中如果选中店铺，则改为不选中。
//(不加这个判断条件的话本来没选中的店铺也会执行shopCheckedFalse，导致商品选中数量会-1)
else if (cartList[index].商店检查){
commit(shopCheckedFalse ，index)；
}
//判断店铺是否全选，改变全选按钮状态
如果(状态。shopcheckednum===购物车列表。长度){
commit( allCheckedTrue )；
}否则{
提交( allCheckedFalse )；
}
},
//店铺选中状态
商店检查({状态，提交},索引){
const购物车列表=州。购物车列表；
如果(!目录[索引]。商店检查){
//让店铺选中 将当前店铺内未选中的商品改为选中
commit(shopCheckedTrue ，index)；
对于(让k在目录[索引]中)。产品){
如果(!目录[索引]。产品[k]的缩写.预检查){
commit(proCheckedTrue ，{ index，key:k })；
}
}
}否则{
//店铺取消选中 将当前店铺内所有商品改为未选中
commit(shopCheckedFalse ，index)；
对于(让k在目录[索引]中)。产品){
commit(proCheckedFalse ，{ index，key:k })；
}
}
如果(状态。shopcheckednum===购物车列表。长度){
commit( allCheckedTrue )；
}否则{
提交( allCheckedFalse )；
}
},
//全选
AllChecked({ state，commit }) {
const购物车列表=州。购物车列表；
如果(!state.allChecked) {
//全选 所有未选中的店铺商品全部选中
commit( allCheckedTrue )；
为（让我在目录中){
如果(!目录表.商店检查){
commit(shopCheckedTrue ，I)；
}
对于(让k在目录表[i]中。产品){
如果(!目录表.产品[k]的缩写.预检查){
commit(proCheckedTrue ，{ index: i，key:k })；
}
}
}
}否则{
//取消全选 所有店铺商品取消选中
提交( allCheckedFalse )；
为（让我在目录中){
commit(shopCheckedFalse ，I)；
对于(让k在目录表[i]中。产品){
commit(proCheckedFalse ，{ index: i，key:k })；
}
}
}
},
最开始我是把这些代码都放在了三个方法里，这样写也能实现，但是看起来实在太乱了，而且不能追踪到具体是进行了什么操作。不想搞那么多方法的可以看看
//单个商品选中
ProChecked(state，{ index，key }) {
const购物车列表=州。购物车列表；
//商品选中状态取反
目录[索引]。产品[答案]。预检查=
！目录[索引]。产品[答案]。预检查；
//如果选中，选中数量1,取消选中则-1
if (cartList[index].产品[答案]。预检查){
目录[索引]。proCheckedNum
}否则{
目录[索引]。proCheckedNum-；
}
//如果商品全选，则店铺选中；否则店铺取消选中
if (cartList[index].proCheckedNum===购物车列表[索引]。产品。长度){
目录[索引]。shopChecked=true
state.shopCheckedNum
} else if (cartList[index].商店检查){
目录[索引]。shopChecked=false
状态。shopcheckednum-；
}
//判断店铺是否全选，改变全选按钮状态
如果(状态。shopcheckednum===购物车列表。长度){
state.allChecked=true
到此这篇关于某视频剪辑软件实现淘宝购物车三级选中功能详解的文章就介绍到这了，更多相关某视频剪辑软件购物车三级选中功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。