本文要结合下面几篇文章才能串起来:
第4章 Vue全家桶(vue-router+vuex)- 4.17 vuex的其本使用8步骤
第4章 Vue全家桶(vue-route+vuex)- 4.18 vuex为什么要使用actions——异步起到同步的作用
第4章 Vue全家桶(vue-router+vuex) - 4.19 Vuex系列的辅助函数的运用——mapState,mapGetters,mapMutations,mapActions
第4章 Vue全家桶(vue-router+vuex) - 4.20 如何在组件内部提交数据给vuex共3步骤
第4章 Vue全家桶(vue-router+vuex) - 4.21 使用vuex的模块化构建购物车步骤
第4章 Vue全家桶(vue-router+vuex) - 4.22 模拟mock数据和商铺数据显示13步骤
项目目录如下:
如何添加商品到购物车中6步骤
目录
如何添加商品到购物车中第1步:在ProductList.vue里面添加按钮。
如何添加商品到购物车中第2步:在ProductList.vue里面导入mapActions.
如何添加商品到购物车中第3步:在ProductList.vue里面设置方法。
如何添加商品到购物车中第4步:在cart.js里面设置addProductToCart方法。
如何添加商品到购物车中第5步:在cart.js里面设置pushProductToCart方法。
如何添加商品到购物车中第6步:在cart.js里面设置incrementCartItemQuantity方法。
下面是操作步骤:每一步操作,在相应的代码后面都有备注。
如何添加商品到购物车中第1步:在ProductList.vue里面添加按钮。
如何添加商品到购物车中第2步:在ProductList.vue里面导入mapActions.
如何添加商品到购物车中第3步:在ProductList.vue里面设置方法。
ProductList.vue代码:
// ProductList.vue内容
<template>
<div>
<h2>我的商铺</h2>
<ul> <!-- //4.22 模拟mock数据和商铺数据显示第3步:在ProductList.vue里面展示。 -->
<li v-for="(product) in products" :key="product.id">
{{product.title}} - {{product.price | currency}} <!-- //4.22 模拟mock数据和商铺数据显示第12步:使用过滤器currency -->
<br>
<button @click="addProductsToCart(product)">加入购物车</button> <!-- //4.23 如何添加商品到购物车中第1步:添加按钮。 -->
</li>
</ul>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex'; //4.22 模拟mock数据和商铺数据显示第4步:在ProductList.vue里面导入mapState。| //4.23 如何添加商品到购物车中第2步:添加mapActions.
export default {
computed: { //4.22 模拟mock数据和商铺数据显示第5步:在ProductList.vue里面设置mapState方法。
...mapState('products',['products']) //获取products模块的products数据。
},
created () { //4.22 模拟mock数据和商铺数据显示第6步:在ProductList.vue里面created方法。
this.$store.dispatch('products/getAllProducts'); //创建products模块的getAllProducts方法。
},
methods: {
...mapActions('cart',['addProductsToCart']) //4.23 如何添加商品到购物车中第3步:设置方法。
}
}
</script>
<style lang="scss" scoped>
</style>
如何添加商品到购物车中第4步:在cart.js里面设置addProductToCart方法。
如何添加商品到购物车中第5步:在cart.js里面设置pushProductToCart方法。
如何添加商品到购物车中第6步:在cart.js里面设置incrementCartItemQuantity方法。
cart.js代码:
// cart.js内容
export default {
namespaced:true, //4.21 使用vuex的模块化构建购物车第8步:在cart.js里面添加namespaced属性.
state:{
cartList: [], //4.21 使用vuex的模块化构建购物车第4步:在cart.js里面添加cartList和count.
count:0
},
getters:{
getCount(state){ //4.21 使用vuex的模块化构建购物车第10步:在cart.js里面添加getters属性.
return state.count
}
},
mutations:{
pushProductToCart(state,{ id, quantity}) { //4.23 如何添加商品到购物车中第5步:
state.cartList.push({
id,
quantity
})
},
incrementCartItemQuantity(state,{id}){ //4.23 如何添加商品到购物车中第6步:
const product = state.cartList.find(item=>item.id === id);
product.quantity++;
}
},
actions:{
addProductToCart({commit,state},product){ //4.23 如何添加商品到购物车中第4步:
if (product.inventory > 0) { //有库存
const cartItem = state.cartList.find(item=>item.id===product.id);
if(!cartItem){
commit('pushProductToCart',{id:product.id,quantity:1})
}else{
//购物车中已有数据
commit('incrementCartItemQuantity',{id:product.id});
}
}
}
}
}
此文章只涉及了两个文件的代码,其它代码在前面的几章节里面可以查看。
运行结果如下:
在下一章节中讲解:购物车中数据渲染。