本文要结合下面几篇文章才能串起来:
第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步骤
第4章 Vue全家桶(vue-router+vuex) - 4.23 如何添加商品到购物车中6步骤
第4章 Vue全家桶(vue-router+vuex) - 4.24 购物车中数据渲染4步骤
首先查看项目目录:‘
4.25 商铺库存和购物车总价处理6步骤
目录
商铺库存和购物车总价处理第1步:在cart.js里面设置购物车总共价格的方法。
商铺库存和购物车总价处理第2步:在ShoppingCart.vue里面添加cartTotalPrice方法。
商铺库存和购物车总价处理第3步:在ShoppingCart.vue里面添加cartTotalPrice显示数据。
商铺库存和购物车总价处理第4步:在cart.js里面减少库存的方法。
商铺库存和购物车总价处理第5步:在products.js里面设置减少库存的方法。
商铺库存和购物车总价处理第6步:在ProductList.vue里面的按钮上添加disabled,当库存为零时,按钮为虚的状态。
下面是操作步骤:每一步操作,在相应的代码后面都有备注。
商铺库存和购物车总价处理第1步:在cart.js里面设置购物车总共价格的方法。
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
},
// 获取购物车的数据
getCartList(state,getters,rootState){ //4.24 购物车中数据渲染第4步:在cart.js里面设置添加到购物车的方法。
return state.cartList.map(({id,quantity})=>{ //map遍历数据
const product = rootState.products.products.find(item=>item.id===id);
return {
title: product.title,
price: product.price,
quantity
}
})
},
cartTotalPrice(state,getters){ //4.25 商铺库存和购物车总价处理第1步:在cart.js里面设置购物车总共价格的方法。
return getters.getCartList.reduce((total,product)=>{
return total + product.price * product.quantity
},0);
}
},
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});
}
// 如果想提交另一个模块中的方法,那么需要第三个参数{root:true}
commit('products/decrementProductInventory',{ id:product.id }, {root:true}) //4.25 商铺库存和购物车总价处理第4步:在cart.js里面减少库存的方法。
}
}
}
}
商铺库存和购物车总价处理第2步:在ShoppingCart.vue里面添加cartTotalPrice方法。
商铺库存和购物车总价处理第3步:在ShoppingCart.vue里面添加cartTotalPrice显示数据。
ShoppingCart.vue代码:
// ShoppingCart.vue内容
<template>
<div>
<h2>我的购物车</h2>
<ul> <!-- //4.24 购物车中数据渲染第1步:在ShoppingCart.vue里面设置购物车显示的数据。-->
<li v-for="(item,index) in getCartList" :key="index">
{{item.title}} - {{item.price | currency}} x {{item.quantity}}
</li>
</ul>
总价格:{{cartTotalPrice}} <!-- //4.25 商铺库存和购物车总价处理第3步:在ShoppingCart.vue里面添加cartTotalPrice显示数据。 -->
</div>
</template>
<script>
import { mapGetters } from 'vuex' //4.24 购物车中数据渲染第2步:在ShoppingCart.vue里面导入mapGetters.
export default {
name:'ShoppingCart', //组件名 注册全局组件时使用
computed: { //4.24 购物车中数据渲染第3步:在ShoppingCart.vue里面设置mapGetters方法。
...mapGetters('cart', ['getCartList','cartTotalPrice']) //4.25 商铺库存和购物车总价处理第2步:在ShoppingCart.vue里面添加cartTotalPrice方法。
}
}
</script>
<style lang="scss" scoped>
</style>
商铺库存和购物车总价处理第5步:在products.js里面设置减少库存的方法。
products.js代码:
// products.js内容
import Axios from 'axios' //4.22 模拟mock数据和商铺数据显示第8步:在products.js里面导入axios。
export default {
namespaced:true, //4.21 使用vuex的模块化构建购物车第9步:在products.js里面添加namespaced属性.
state:{
products: [] //4.21 使用vuex的模块化构建购物车第5步:在products.js里面添加products.
},
getters:{
},
mutations:{
getAllProducts(state,products){ //4.22 模拟mock数据和商铺数据显示第10步:在products.js里面设置mutations方法。
state.products = products
},
decrementProductInventory(state,{ id }) { //4.25 商铺库存和购物车总价处理第5步:在products.js里面设置减少库存的方法。
const product = state.products.find(item => item.id === id);
product.inventory--;
}
},
actions:{
async getAllProducts({commit}){ //4.22 模拟mock数据和商铺数据显示第7步:在products.js里面设置actions方法。
//发送请求 获取数据 提交mutations
try { //4.22 模拟mock数据和商铺数据显示第9步:在products.js里面通过axios获取products数据。
const res = await Axios.get('/api/products');
const results = res.data.results;
commit('getAllProducts',results);
} catch (error) {
console.log(error);
}
}
}
}
商铺库存和购物车总价处理第6步:在ProductList.vue里面的按钮上添加disabled,当库存为零时,按钮为虚的状态。
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}} - {{product.inventory}} <!-- //4.22 模拟mock数据和商铺数据显示第12步:使用过滤器currency -->
<br>
<button :disabled='!product.inventory' @click="addProductsToCart(product)">加入购物车</button> <!-- //4.23 如何添加商品到购物车中第1步:添加按钮。 -->
<!-- //4.25 商铺库存和购物车总价处理第6步:在ProductList.vue里面的按钮上添加disabled,当库存为零时,按钮为虚的状态。 -->
</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>
运行结果如下:
到此Vuex讲解完成。
后面只有多看项目,多写代码,打项目的思路熟悉了,你就会写项目了。