Vue实现类似于美团外卖不同口味添加到购物车功能

Question

1.类似于美团外卖点餐的功能，基本上的添加到购物车是实现了；
点击添加到购物车，相同餐品数量相加，不同餐品个数相加

2.问题
现在新增加一个需求，有的餐品是有口味的。需要实现，同样餐品的相同口味，数量相加，同样餐品的不同口味，个数相加

如图，招牌鸭脖是一样的餐品，按照我之前的实现步骤，应该是只显示一条，数量是5，但是现在需要把口味加上去，并且区分开来，，不知道怎么做o(╥﹏╥)o

3.之前的代码，点击餐品，传递到vuex里面，在vuex里面，遍历已选数组，如果id相同，就数量加加，如果id不同，就push进去已选数组

4，求大神指点应该怎么写口味？

5.目前vuex里的代码

  // 没有口味
      if(!food.tasteItem){
        if(!food.count){
          Vue.set(food,'count',1);
          state.selectedFoods.push(food);
        } else {
          const storedFood = state.selectedFoods.find(f => f.goodsId === food.goodsId);
          if(storedFood){
            food.count++
          }
        }
      }
      // 有口味
      if(food.tasteItem) {
        let newFood = Object.assign({}, {...food});
        newFood.goodsId = newFood.goodsId + '-' + food.tasteItem.id;
        const storedFood = state.selectedFoods.find(f => f.goodsId === newFood.goodsId);
        console.log(storedFood);
        if(storedFood){
          food.count++;
        } else {
          Vue.set(food,'count',1);
          state.selectedFoods.push(food);
        }

      }

Answer 1

最快的办法，遍历已选数组的时候，不止判断id，也对附加条件，如口味之类的进行是否相同的判断

Answer 2

var cart = { 
}  

function addToCart(food){
    var key = food.id + foo.taste;
    cart[key] = cart[key] || [];
    cart.push(food); 
}

Answer 3

3.之前的代码，点击餐品，传递到vuex里面，在vuex里面，遍历已选数组，如果id相同，就数量加加，如果id不同，就push进去已选数组
这里的id换成食物id + 口味。就是二楼说的那种办法。

//假设你的购物车对象如下
var cart = {
    "shopId(餐馆id)": {
        "食物分类id": {
            "食物id": {
                //食物属性
                "num": 1,
                "name": "1",
                "price": 21,
                "specs": "地狱无敌辣",//口味
            },
        }
    }
   }

//把你的食物id改成食物id=食物id+specs,像这样
var cart = {
    "shopId(餐馆id)": {
        "食物分类id": {
            "食物id + 食物id.specs": {
                //食物属性
                "num": 1,
                "name": "1",
                "price": 21,
                "specs": "地狱无敌辣",//口味
            },
        }
    }
   }

这样还不懂？？！！