在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>