VUE+Vuex购物车功能实现

最新推荐文章于 2025-05-02 20:46:08 发布

东方凝落

最新推荐文章于 2025-05-02 20:46:08 发布

阅读量1.3k

点赞数 2

分类专栏： VUE 文章标签： vue.js javascript 前端 vue

本文链接：https://blog.youkuaiyun.com/weixin_57383920/article/details/127973687

版权

本文介绍了如何在Vue项目中使用Vuex实现购物车功能。通过在商品详情页设置加入购物车按钮，调用Vuex的actions进行操作。在Cart组件中，利用Vuex的getters获取购物车的总价格和总数量，并展示了购物车页面的布局设计，包括商品数据的获取、加减商品、选择商品和删除商品的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

在商品详情中设置一个加入购物车的按钮<button>

//goods是需要加入购物车的商品

<button @click="addToCart(goods)">加入购物车</button>

methods:{

//item是一个形参

addToCart(item){

//加入购物车

this.$store.dispatch('addCart',item);

}

}

购物车页面布局设计

src/components/Cart.vue创建一个vue文件Cart.vue

<!-- 购物车列表 -->
      <div class="cart">
          <!-- 购物车列表头部 -->
          <ul class="m-inline-block">
              <li class="inline-block item-goods">商品</li>
              <li class="inline-block item-price">价格</li>
              <li class="inline-block item-count">数量</li>
              <li class="inline-block item-operate">操作</li>
          </ul>
          <!-- 标题 -->
          <div class="cart-title">购物车</div>
          <!-- 表身 -->
          <div class="table-box-inner">
              <table>
                   <!-- 遍历商品-->
                  <tr class="vFor" v-for="(item,index) in cartList" :key="index">
                      <td class="item-goods">
                          <!--选中商品-->
                          <input class="goods-input" type="checkbox" :checked=" item.item.checked"  @click="selectItem(item)">
                          <!--商品图片-->
                          <a class="goods-a" href=""><img :src="item.item.img" alt=""></a>                      <!--商品详情-->
                          <div class="goods-info">

最低0.47元/天解锁文章