vue购物车的实现,vuex使用场景购物车
这篇文章主要为大家详细介绍了状态管理实现简单购物车，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了状态管理实现简单购物车的具体代码，供大家参考，具体内容如下
文件结构
App.vue
模板
div id=应用程序
h3购物车演示/h3
整点
h4产品：/h4
产品列表/
整点
h4我的购物车/h4
购物车/
/div
/模板
脚本
从" @/组件/产品列表"导入产品列表；
从" @/组件/购物车"导入购物车；
导出默认值{
组件：{
产品列表，
购物车
}
}
/脚本
产品。某视频剪辑软件
模板
差异
ul v-for=产品中的项目：key=item.id
里
{ {项目。title } }-{ { item。price } } nbsp不间断空格库存：{{ item.inventory }}br
按钮：禁用=!项目。库存 @ click=添加到购物车(项目)添加到购物车/按钮
/李
/ul
/div
/模板
脚本
从" vuex "导入{ mapGetters，映射操作}。
导出默认值{
计算值：{
//.mapGetters(产品,{
//产品："所有产品"
//})
.mapGetters({
产品："产品/所有产品"
})
},
方法：{
.mapActions(cart ，[addToCart])
},
已创建(){
这个100美元商店。派单(“产品/获取所有产品”)；
}
}
/脚本
ShoppingCart.vue
模板
差异
ul v-for=产品中的项目：key=item.id
李。title } } * { { item。数量} }/Li
/ul
divtotal: {{ total }}/div
/div
/模板
脚本
从" vuex "导入{ mapGetters }；
导出默认值{
计算值：{
.mapGetters(cart ，{
产品："卡式产品",
合计："车价合计"
})
}
}
/脚本
模块/产品。射流研究…
导入美国石油学会(American Petroleum Institute)自././API ；
常量状态={
全部：[]
}
const getters={
所有产品：状态=状态。所有
}
常量操作={
//获取初始商品数据
getAllProducts({ commit }) {
API。get products(products=commit( set products ，products))；
}
}
常量突变={
集合产品(状态，产品){
state.all=产品；
},
//减少该商品库存
减少库存（状态，{ id }) {
让产品项目=状态。全部。find(item=item。id===id)；
产品项目。库存-；
}
}
导出默认值{
命名空间：对，
状态，
吸气剂，
行动，
突变
}
模块/cart.js
常量状态={
addedList: []
}
const getters={
cartProducts(state，getters，rootState) {
返回状态。已添加列表。映射((项目，索引)={
设产品项目=根状态。产品。全部。查找(产品=产品。id===item。id)；
返回{
标题：productItem.title，
价格：productItem.price，
数量：项目。数量
}
})
},
cartTotalPrice(state，getters) {
返回吸气剂。购物车产品。减少((总计，乘积)={
退货总额(产品。价格*产品。数量)；
}, 0);
}
}
常量操作={
addToCart({状态，提交},产品){
if (product.inventory 0) {
让产品项目=状态。已添加列表。find(item=item。id===产品。id)；
if (productItem) {
提交(“增加项目数量”，产品项目)；
}否则{
提交( pushItemToCart ，产品)；
}
提交(产品/减少库存，产品，{ root:true })；
}
}
}
常量突变={
//增加购物车中同等商品的数量
增加项目数量(状态，{ id }) {
让产品项目=状态。已添加列表。find(item=item。id===id)；
产品项目。数量；
},
//将商品加入购物车
pushItemToCart(state，{ id }) {
state.addedList.push({
id，
数量：1
})
},
}
导出默认值{
命名空间：对，
状态，
吸气剂，
行动，
突变
}
商店/索引。射流研究…
从“Vue”导入Vue
从" Vuex "导入Vuex
从导入购物车。/模块/购物车；
从导入产品。/模块/产品；
vue。使用(Vuex)；
导出默认的新Vuex .商店({
模块：{
推车，
制品
}
});
主页。射流研究…
从“Vue”导入Vue
从" @/components/App.vue "导入应用程序；
从" @/商店"导入商店；
vue。配置。生产提示=假；
新Vue({
店，
render: h=h(App)
}).$ mount( # app )；
这就是本文的全部内容。希望对大家的学习有帮助，支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。