用Vue写加入购物车小功能

用户10781437

发布于 2023-10-10 12:49:58

1900

发布于 2023-10-10 12:49:58

当你需要用Vue编写一个关于商品页面加入购物车的功能时，需要先创建一个 Vue 组件

示例

<!-- 商品页面组件 -->
<template>
  <div>
    <h2>{{ product.name }}</h2>
    <p>{{ product.description }}</p>
    <p>价格: ${{ product.price }}</p>
    <button @click="addToCart">加入购物车</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        name: "商品名称",
        description: "商品描述",
        price: 19.99,
        // 其他商品信息...
      },
    };
  },
  methods: {
    addToCart() {
      // 在这里触发加入购物车的逻辑
      this.$store.commit("m_cart/addToCart", this.product);
      // 你需要在 Vuex store 中实现 'm_cart/addToCart' mutation
      // mutation 的作用是将商品添加到购物车中
    },
  },
};
</script>

上述代码中，我们创建了一个简单的商品页面组件，该组件显示商品的名称、描述和价格，并有一个 “加入购物车” 的按钮。当按钮被点击时，addToCart 方法会被调用，该方法通过 Vuex store 触发了名为 ‘m_cart/addToCart’ 的 mutation，将商品添加到购物车中。