Vue.js项目实现批量将选中商品加入购物车的需求求助

1. 编写批量添加函数 #

在你的脚本代码里新增一个函数，用来筛选出所有勾选的商品，带上对应的数量，然后批量添加到购物车：

const addSelectedToCart = () => {
  // 遍历所有商品，只处理勾选的项
  productsstore.Livres.forEach((product, index) => {
    if (checked.value[index]) {
      const buyQty = count.value[index];
      // 调用购物车仓库的添加方法（用你之前单商品加购的那个方法就行）
      cartstore.addItem(product, buyQty);
    }
  });
  // 可选：加购完成后可以重置勾选状态或数量，比如：
  // checked.value.fill(false);
  // count.value.fill(1);
};

2. 给「加入购物车」按钮绑定点击事件 #

在页面底部的按钮上绑定上面的函数：

<div class="mt-8 flex justify-between items-center p-4">
  <span class="font-bold text-xl">选中商品总价: {{ checkedTotal }} DHS</span>
  <button @click="addSelectedToCart" class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600">
    加入购物车
  </button>
</div>

关键注意点 #

• 确保你的cartstore里的添加方法支持接收「商品」和「数量」两个参数。如果之前的单商品加购方法是直接传商品，那需要调整一下：

  // 示例：cartstore里的addItem方法（如果没改的话）
  const addItem = (product, quantity) => {
    // 先检查购物车有没有同款商品
    const existing = cart.value.find(item => item.id === product.id);
    if (existing) {
      existing.quantity += quantity;
    } else {
      // 把商品和数量一起存进去
      cart.value.push({ ...product, quantity });
    }
  };
  

• 函数里通过checked.value[index]判断商品是否被选中，count.value[index]拿到用户选择的购买数量，然后循环调用加购方法就行。
• 加购完成后可以重置勾选状态或数量，让用户体验更好。

更新后的完整脚本代码 #

const productsstore = useProductsStore();
const cartstore = useCartStore();

const count = ref(Array(productsstore.Livres.length).fill(1));
const checked = ref(Array(productsstore.Livres.length).fill(true));

function increment(index) {
  count.value[index]++;
}

function decrement(index) {
  if (count.value[index] > 1) {
    count.value[index]--;
  }
}

function calculateprice(productprice, qty) {
  return (productprice * qty).toFixed(2);
}

const updateChecked = (index) => {
  checked.value[index] = !checked.value[index];
};

const isChecked = (index) => {
  return checked.value[index];
};

const checkedTotal = computed(() => {
  let total = 0;
  for (let i = 0; i < checked.value.length; i++) {
    if (isChecked(i)) {
      total += parseFloat(calculateprice(productsstore.Livres[i].prix, count.value[i]));
    }
  }
  return total.toFixed(2);
});

// 新增的批量加购函数
const addSelectedToCart = () => {
  productsstore.Livres.forEach((product, index) => {
    if (checked.value[index]) {
      cartstore.addItem(product, count.value[index]);
    }
  });
};

内容的提问来源于stack exchange，提问作者Noor Gag