vuex的购物车Cart代码

已于 2022-03-05 15:23:08 修改
阅读量153 收藏
点赞数
分类专栏： JavaScript vue 文章标签： vue.js javascript 前端
于 2022-03-05 15:10:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40945354/article/details/123295187
版权
vue 同时被 2 个专栏收录
722 篇文章 4 订阅
订阅专栏
JavaScript
628 篇文章 6 订阅
订阅专栏 
<template>
  <div>
      <table width=900px>
          <tr>
              <td>商品编号</td>
              <td><input type="text" v-model.number="id"></td>
          </tr>
                   <tr>
              <td>商品名称</td>
              <td><input type="text" v-model.number="title"></td>
          </tr>
                   <tr>
              <td>商品价格</td>
              <td><input type="text" v-model.number="price"></td>
          </tr>
          <tr>
              <td colspan="2"><button @click="addCart">加入购物车</button></td>
          </tr>
      </table>
      <table>
          <thead>
          <tr>
              <th>编号</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>金额</th>
              <th>操作</th>
          </tr>
          </thead>
          <tbody>
              <tr v-for="book in books" :key="book.id">
                  <td>{{ book.id }}</td>
                  <td>{{ book.name }}</td>
                  <td>{{ book.price }}</td>
                  <td><button>-</button>{{ book.count }}<button>+</button></td>
                  <td>金额</td>
                  <td><button>删除</button></td>
              </tr>
          </tbody>
      </table>
      <span>总价：￥0.00</span>
      </div>
</template>

<script>
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: 1
        }
    },
    computed: {
        books() {
            return this.$store.state.items
        }
    },
    mothods: {
        addCart() {
            this.$store.commit('pushItemToCart', {
                id: this.id,
                title: this.title,
                price: this.price,
                count: this.quantity
            })
            this.id = '';
            this.title = '';
            this.price = '';
        }
    }
   
}
</script>

<style>

</style>

好多遗漏错误及拼写错误。
更正如下：

<template>
  <div>
      <table width=900px>
          <tr>
              <td>商品编号</td>
              <td><input type="text" v-model.number="id"></td>
          </tr>
                   <tr>
              <td>商品名称</td>
              <td><input type="text" v-model="title"></td>
          </tr>
                   <tr>
              <td>商品价格</td>
              <td><input type="text" v-model="price"></td>
          </tr>
          <tr>
              <td>数量</td>
              <td><input type="text" v-model.number="quantity"></td>
          </tr>
                        <tr>
              <td colspan="2"><button @click="addCart">加入购物车</button></td>
          </tr>
      </table>
      <table>
          <thead>
          <tr>
              <th>编号</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>金额</th>
              <th>操作</th>
          </tr>
          </thead>
          <tbody>
              <tr v-for="book in books" :key="book.id">
                  <td>{{ book.id }}</td>
                  <td>{{ book.title }}</td>
                  <td>{{ book.price }}</td>
                  <td><button>-</button>{{ book.count }}<button>+</button></td>
                  <td>金额</td>
                  <td><button>删除</button></td>
              </tr>
          </tbody>
      </table>
      <span>总价：￥0.00</span>
      </div>
</template>

<script>
//import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: 1
        }
    },
    computed: {
        books() {
            return this.$store.state.items
        }
    },
    methods: {
        addCart() {
            this.$store.commit('pushItemToCart', {
                id: this.id,
                title: this.title,
                price: this.price,
                count: this.quantity
            })
            this.id = '';
            this.title = '';
            this.price = '';
        }
    }
   
}
</script>

<style scoped>
div {
  width: 800px;
}
table {
  border: 1px solid black;
  width: 100%;
  margin-top: 20px;
}
th {
  height: 50px;
}
th, td {
  border-bottom: 1px solid #ddd;
  text-align: center;
}
span {
  float: right;
}
</style>

<template>
  <div>
      <table>
          <tr>
              <td>商品编号</td>
              <td><input type="text" v-model.number="id"></td>
          </tr>
                   <tr>
              <td>商品名称</td>
              <td><input type="text" v-model="title"></td>
          </tr>
                   <tr>
              <td>商品价格</td>
              <td><input type="text" v-model="price"></td>
          </tr>
          <tr>
              <td>数量</td>
              <td><input type="text" v-model.number="quantity"></td>
          </tr>
                        <tr>
              <td colspan="2"><button @click="addCart">加入购物车</button></td>
          </tr>
      </table>
      <table>
          <thead>
          <tr>
              <th>编号</th>
              <th>商品名称</th>
              <th>价格</th>
              <th>数量</th>
              <th>金额</th>
              <th>操作</th>
          </tr>
          </thead>
          <tbody>
              <tr v-for="book in books" :key="book.id">
                  <td>{{ book.id }}</td>
                  <td>{{ book.title }}</td>
                  <td>{{ book.price }}</td>
                  <td><button>-</button>{{ book.count }}<button>+</button></td>
                  <td>金额</td>
                  <td><button>删除</button></td>
              </tr>
          </tbody>
      </table>
      <span>总价：￥0.00</span>
      </div>
</template>

<script>
//import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
            id: null,
            title: '',
            price: '',
            quantity: null
        }
    },
    computed: {
        books() {
            return this.$store.state.items
        }
    },
    methods: {
        addCart() {
            this.$store.commit('pushItemToCart', {
                id: this.id,
                title: this.title,
                price: this.price,
                count: this.quantity
            })
            this.id = '';
            this.title = '';
            this.price = '';
        }
    }
   
}
</script>

<style scoped>
div {
  width: 1400px;
}
table {
  border: 1px solid black;
  width: 100%;
  margin-top: 20px;
}
th {
  height: 50px;
}
th, td {
  border-bottom: 1px solid #ddd;
  text-align: center;
}
span {
  float: right;
}
</style>
hamimelon2020
关注
专栏目录
Vuex 购物车实战
huangdj321的博客
02-23 1462
1、在 新建 文件，写上 的基础格式 2、在任意组件中 拆分购物车组件 在 中 在 中 在 中，部分代码如下 刷新页面，能正常显示，终端无报错即可。1、在 里面获取购物车列表数据 2、在 组件中 3、在子组件 中渲染数据 此时刷新购物车页面，如图1、给点击加减符号的按钮绑定事件，去触发 中的 函数。在 中 2、在 中，打印一个 此时刷新购物车页面，分别点击加减按钮，看是否触发了 ，如图：3、继续修改 中的代码 此时刷新页面，点击加减按钮，发现数据正常显示。由于我们没有对购物车底
VUE+Vuex购物车功能实现
weixin_57383920的博客
11-21 1334
vue+vuex购物车（加入购物车，加商品，减商品，删除商品，计算选中商品总价格和总数量）
vuex实现购物车功能
10-15
主要为大家详细介绍了vuex实现购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vuex实现简单的购物车案例
追梦小少年的博客
01-26 1841
使用Vuex实现简单的购物车案例 1、Vuex一般是由state、actions、mutations、getters、modules这几部分构成 2、我们需要首先在state中定义一个cars空数组 3、我们目前是通过localStorage本地存储来存储数据 4、在actions文件中，我们需要添加一个加入购物车的方法（如以下代码） export default { addGoodInCar(store,goodInfo){ let cars = getGoodCar(); let isHas = car
Vue实现购物车完整代码
Circle666的博客
12-01 2612
其实之前也做过几次购物车，但是没有保留代码，这次pc端有需求类似京东购物车，效果图如下 <ul class="order_lists cartTop"> <li class="list_chk"> <!--所有商品全选--> <input type="checkbox" v-model="fetchData.isSelectAll" id="all" c
vue 实现购物车（Vuex）
热门推荐
weixin_46419373的博客
07-10 1万+
在电商项目当中，都会有购物车的功能，购物车一般都有，加入购物车并保存本地（localStorage）、从本地把数据取出来并渲染页面、点击复选框（商品前面和底部的全选实现）、价格的加加减减。 在这里我只是简单的用Vuex来实现购物车的功能。 首先，要对Vuex有一个简单的了解 1、Vuex是什么？ 运用到了js设计模式中的单例模式，单例模式想要做到的是，不管我们尝试去创建多少次，它都只给你返回第一次所创建的那唯一的一个实例。 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 V.
vuex购物车
zhusixu的博客
09-23 1551
仓库地址：https://github.com/dubuxunqi/vuexShoppingCar 先看下效果图 看下目录结构： 安装vue脚手架，还有布局就不在说了，主要讲vuex的用法 1.安装vuex依赖 npm install vuex --save 2.先是在src路径下创建一个vuex文件夹store，里面创建一个入口文件index.js。引入VUE、VUEX两大神器，然后在mai...
vuex购物车案例代码
最新发布
06-21
下面是一个简单的 Vue.js 和 Vuex 购物车案例代码概览： ```javascript // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { cart: [],...
vuex实现的简单购物车功能示例
12-29
本文实例讲述了vuex实现的简单购物车功能。分享给大家供大家参考，具体如下： 购物车组件 vuex-shopCart 已选商品 [removed] import shopList from ./shop-list;
vuex写简易加入购物车
qq_72243342的博客
10-26 429
vuex写购物车 然后是store里面的index部分，可以判别购物车页面内有没有相同商品如果有的话使该商品数量加一，没有的话购物车新加一件商品 import Vue from ‘vue’ import Vuex from ‘vuex’Vue.use(Vuex)export default new Vuex.Store({ state: { user:JSON.parse(localStorage.getItem(‘user’)) || [] }, getters: { }, mutations: {
基于Vuex实现小米商城购物车
一天不写代码我就浑身难受的博客
03-03 958
小米MiMall购物车
Vue.js 框架源码与进阶 - Vuex 状态管理 - 购物车案例
时光海的博客
12-31 979
Vuex 状态管理 - 购物车案例8.4 Vuex 购物车案例案例演示模板商品列表添加购物车我的购物车 - 列表我的购物车 - 统计我的购物车 - 删除购物车组件 - 购物车列表购物车组件 - 统计本地存储 8.4 Vuex 购物车案例 接下来我们通过一个购物车案例来演示 Vuex 在项目中的使用方式，首先把购物车的 项目模板 下载下来。 案例演示 模板 商品列表 添加购物车 我的购物车 - 列表 我的购物车 - 统计 我的购物车 - 删除 购物车组件 - 购物车列表 购物车组件 - 统计 本地存储
vuex购物车demo
栋栋的博客
12-16 247
先看效果: 代码： <template> <div class="Home"> <h1>vuex购物车案例</h1> <add-from></add-from> <shop-cart></shop-cart> </div> </template> <script> import AddFrom from './Add.vue' import ShopCart
vuex demo 购物车
Daisy
10-24 662
vuex 五大核心概念 核心概念 State Getter Mutation Action Module 基本目录 components组件实现： App.vue &lt;template&gt; &lt;div id="app"&gt; &lt;Title&gt;&lt;/Title&gt; &lt;product-list&gt;&lt;/produ..
Vux购物车案例
m0_53951384的博客
11-10 376
本案例主要针对Vuex共享数据的练习以及父子组件数据的共享。请求获取数据存入 vuex, 映射渲染。当服务启动后，可以访问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值