欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

在vue中实现一个简单的购物车思路

程序员文章站 2022-03-28 13:42:09
...

在vue中实现一个简单的购物车思路

记录一下学习购物车的思路

  • 首先把所需要的数据存入vuex中
...mapState({cartFoods:'cartFoods',info:'info'});
//cartFoods表示购物车上面所显示的食物列表;info表示购物车下面显示的配送费和最低消费,即获取商家信息列表的数据
...mapGetters({totalCount:'totalCount',totalPrice:'totalPrice'})
//totalCount表示购物车中的食物列表数量,totalPrice表示总价钱
  • 其次定义state中的getter
export default {
  totalCount(state){
    return state.cartFoods.reduce((preTotal,food)=>{
      return preTotal + food.count
    },0)
  },
  totalPrice(state){
    // reduce计算数组元素相加后的总和,preTotal初始值为0
    return state.cartFoods.reduce((preTotal,food)=>{
      return preTotal + food.count * food.price
    },0)
  }
}
  • 在组件上显示
<span>{{totalCount}}</span>
<span>{{totalPrice}}</span>
相关标签: Vue学习