vue购物车功能怎么实现,vuex购物车思路
这篇文章主要为大家详细介绍了状态管理实现简单的购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了状态管理实现购物车功能的具体代码，供大家参考，具体内容如下
文件目录如下：
购物车组件
模板
差异
h1 vuex-购物车/h1
div class=商店列表框
购物清单/
/div
氘已选商品/h2
div class=商店纸盒
购物车/
/div
/div
/模板
脚本
从导入shoList ./购物清单
从导入购物车。/购物车
导出默认值{
名称：商店，
组件：{
购物清单：购物清单，
"购物车":购物车
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
/风格
商品列表
模板
div class=购物清单
桌子
商店列表标题
tdid/td
任务描述名称/td
任务描述价格/td
任务描述操作/td
/tr
tr v-for=商店列表中的项目 class= shop-listinfo :key= item。id
td{{item.id}}/td
td{{item.name}}/td
td{{item.price}}/td
任务描述
button @click=addToCart(item)加入购物车/按钮
/td
/tr
/表格
/div
/模板
脚本
从" vuex "导入{mapGetters，映射操作}。
导出默认值{
名称：商店列表，
计算值：{
.mapGetters({
商店列表：获取商店列表，
})
},
方法：{
.mapActions([addToCart])
},
}
/脚本
选中商品列表
模板
div class=购物清单
桌子
商店列表标题
tdid/td
任务描述名称/td
任务描述价格/td
任务描述数量/td
任务描述操作/td
/tr
tr v-for=购物车数据中的项目 class= shop-listinfo :key= item。id
td{{item.id}}/td
td{{item.name}}/td
td{{item.price}}/td
td{{item.num}}/td
TD button class= shop-dele dele-BTN @ click= deleteShop(item)删除/button/td
/tr
tr v-if=cartData.length=0
任务描述列span=5 暂无数据/td
/tr
tr
任务描述列span=2 总数：{{totalNum}}/td
任务描述列span=2 总价格：{ {总价格}}/td
TD按钮class= dele-cart dele-BTN @ click=清除购物车清空购物车/button/td
/tr
/表格
/div
/模板
脚本
从" vuex "导入{mapGetters，mapActions}
导出默认值{
名称："购物车",
data(){
返回{
}
},
计算值：{
.mapGetters({
cartData:addShopList ，
总数：总数，
总价：总价
})
},
方法：{
.地图操作({
clear cart:“clearToCart”，
删除商店："删除商店"
})
}
}
/脚本
vuex 创建
新公共管理安装vuex -保存，创建状态管理文件夹，在文件夹中创建store.js，引入状态管理
商店。射流研究…
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从导入购物车。/模块/购物车
Vue.use(Vuex)
导出默认的新Vuex .商店({
模块：{
手推车
}
})
建立一个模块文件夹模块，里面创建创建当个商店模块，然后默认输出，在商店。射流研究…中引入；
cart.js
常量状态={
商店列表：[{
id: 11，
名称： 鱼香肉丝，
价格：12
}, {
id: 22，
名称： 宫保鸡丁，
价格：14英镑
}, {
id: 34，
名称： 土豆丝，
价格：10英镑
}, {
id: 47，
名称： 米饭，
价格：2英镑
}, {
id: 49，
名称： 蚂蚁上数，
价格：13英镑
}, {
id: 50，
名称： 腊肉炒蒜薹，
价格：15英镑
}],
添加：[]
}
const getters={
//获取商品列表
getshop list:state=state。shop _ list，
//获取购物车列表
addShopList: state={
//map()方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
return state.add.map(({ id，num })={
让产品=状态。购物清单。find(n=n . id==id)//find()方法返回通过测试（函数内判断)的数组的第一个元素的值，如果没有符合条件的元素返回不明确的
if (product) {//如果存在该商品
return {//返回对象
.产品，
数字
}
}
})
},
//获取总数量
totalNum: (state，getters)={
让总数=0
getters.addShopList.map(n={
总计=数量
})
退货总额
},
//计算总价格
totalPrice: (state，getters)={
让总数=0
getters.addShopList.map(n={
总计=数量*价格
})
退货总额
}
},
常量操作={
//加入购物车
addToCart({ commit}，product) {
提交( addCart ，{
id:产品编号
})
},
//清空购物车
clearToCart({ commit}) {
提交(“clearCart”)
},
//删除单个物品
deletToShop({ commit}，product) {
提交("删除商店",产品)
}
}
常量突变={
//加入购物车
addCart(state，{ id}){
让记录=状态。补充。find(n=n . id==id)
如果(!记录){//如果购物车中不存在该商品
state.add.push({//追加商品
id，
数字：1
})
} else { //如果商品已经加入购物车，则改变数量
记录号
}
},
//删除单个物品
删除商店(状态，产品){
state.add.forEach((item，i)={
if (item.id==product.id) {//如果找到该商品
状态添加拼接(一，1)
}
})
},
//清空购物车
清仓车(州){
state.add=[]
}
}
导出默认值{
状态，
吸气剂，
行动，
突变
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。