基于vuex实现购物车功能


Posted in Vue.js onJanuary 10, 2021

本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下

先看效果:

基于vuex实现购物车功能

代码:

<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 from './ShopCart.vue'
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
export default {
 name: 'Home',
 components: {
 AddFrom,
 ShopCart
 },

};
</script>
<style>
table {
 width: 800px;
 margin: 0 auto;
 border: 1px solid #ccc;
 border-spacing: 0;
}
tbody th,
tbody td {
 border: 1px solid #ccc;
 text-align: center;
}
h1{
 text-align: center;
}
.add{
 width: 800px;
 margin: 0 auto;
}
</style>

父组件

<template>
 <div class="add">
 <div class="from-group">
 <label for="">商品编号</label>
 <input type="text" v-model="shop.id" placeholder="请输入商品编号">
 </div>
 <div class="from-group">
 <label for="">商品名称</label>
 <input type="text" v-model="shop.name" placeholder="请输入商品名称">
 </div>
 <div class="from-group">
 <label for="">商品价格</label>
 <input type="text" v-model="shop.price" placeholder="请输入商品价格">
 </div>
 <div class="from-group">
 <label for="">商品数量</label>
 <input type="text" v-model="shop.count" placeholder="请输入商品数量">
 </div>
 <div class="from-group">
 <button @click="add">添加商品</button>
 </div>
 </div>
</template>

<script>
export default {
 name: 'add',
 data() {
 return {
 shop:{}
 };
 },
 methods:{
 add(){
 
 this.$store.dispatch("addShopList",this.shop)
 this.shop = {
 id:"",
 name:"",
 price:"",
 count:""
 }
 }
 }
};
</script>

<style scoped>
 .add{
 width: 800px;
 text-align: center;
 }
</style>

```bash

<template>
 <div class="Shop-Cart">

 <table>
 <thead border>
 <tr>
  <th>商品编号</th>
  <th>商品名称</th>
  <th>商品价格</th>
  <th>商品数量</th>
  <th>小计</th>
  <th>操作</th>
 </tr>
 </thead>
 <tbody v-if="shop.length > 0">
 <tr v-for="(i, e) in shop" :key="e">
  <td>{{ i.id }}</td>
  <td>{{ i.name }}</td>
  <td>{{ i.price }}</td>
  <td>
  <button @click="add(e)">+</button>
  <input type="text" v-model="i.count" />
  <button @click="delet(e)">-</button>
  </td>
  <td>¥{{ i.price * i.count }}</td>
  <td><button @click="del(e)">删除</button></td>
 </tr>
 </tbody>
 <tfoot>
 <tr>
  <td colspan="6" align="right">总计:{{ total }}</td>
  <button @click="clear">清除购物车</button>
 </tr>
 </tfoot>
 </table>
 </div>
</template>

<script>
export default {
 name: 'Shop-Cart',
 components: {},
 data() {
 return {};
 },
 computed: {
 shop() {
 return this.$store.getters.getlist;
 },
 total() {
 return this.$store.getters.getShopTotal;
 }
 },
 methods: {
 del(e) {
 // this.$store.dispatch()
 this.$store.dispatch('remoteList', e);
 },

 add(e) {
 this.$store.dispatch('addList', e);
 },
 delet(e) {
 this.$store.dispatch('deleteList', e);
 },

 clear() {
 this.$store.dispatch('clearList', []);
 }
 }
};
</script>

vuex组件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({
 state: {
 list: [{
 id: 1,
 name: "哇哈哈",
 price: 3,
 count: 0
 },
 {
 id: 2,
 name: "哇哈",
 price: 3,
 count: 0
 }
 ]
 },
 getters: {
 //获取购物车数据
 getlist(state) {
 return state.list
 },
 //商品的总价
 getShopTotal(state,index) {
 let result = 0;
 state.list.forEach((item, index) => {
 result += item.price * item.count
 })
 return result
 },
 },
 mutations: {
 //删除购物车单个数据
 remoteList(state,index) {
 state.list.splice(index, 1);
 console.log("aaa",state)
 },
 //商品数量增加
 addList(state, index) {
 state.list[index].count++;
 },
 //商品数量减少
 deleteList(state, index) {
 state.list[index].count--;
 if(state.list[index].count<=0){
 state.list[index].count = 0
 return ;
 }
 },

 //清除购物车
 clearList(state, arr) {
 state.list = arr
 },
 addShopList(state,shop){
 state.list.push(shop)
 }
 },
 //使用actions调用mutations方法
 actions: {
 remoteList({
 commit
 }, index) {
 commit("remoteList", index)
 },
 addList({
 commit
 }, index) {
 commit("addList", index)
 },
 deleteList({
 commit
 }, index) {
 commit("deleteList", index)
 },
 clearList({
 commit
 }, arr) {
 commit("clearList", arr)
 },
 addShopList({commit},shop){
 commit("addShopList",shop)
 }
 },
 modules: {}
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
在Vue中使用Echarts可视化库的完整步骤记录
Nov 18 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
vue+element实现动态加载表单
Dec 13 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue中activated的用法
Jan 03 Vue.js
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 Vue.js
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
解决vue-router的beforeRouteUpdate不能触发
Apr 14 Vue.js
vue动态绑定style样式
Apr 20 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 #Vue.js
vue编写简单的购物车功能
Jan 08 #Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 #Vue.js
vuex的使用和简易实现
Jan 07 #Vue.js
vue watch监控对象的简单方法示例
Jan 07 #Vue.js
vue.js watch经常失效的场景与解决方案
Jan 07 #Vue.js
You might like
基于curl数据采集之正则处理函数get_matches的使用
2013/04/28 PHP
PHP CURL与java http使用方法详解
2018/01/26 PHP
Laravel框架实现修改登录和注册接口数据返回格式的方法
2018/08/17 PHP
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
关于juqery radio写法的兼容性问题(新老版本jquery)
2010/06/14 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
提示$ is not defined错误分析及解决
2013/04/09 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
JavaScript中判断整字类型最简洁的实现方法
2014/11/08 Javascript
JavaScript中用于四舍五入的Math.round()方法讲解
2015/06/15 Javascript
基于jquery实现省市联动效果
2015/11/23 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
jQuery实现input[type=file]多图预览上传删除等功能
2019/08/02 jQuery
Javascript 关于基本类型和引用类型的个人理解
2019/11/01 Javascript
[02:19]DOTA选手解说齐贺岁
2018/02/11 DOTA
python检测远程服务器tcp端口的方法
2015/03/14 Python
简单理解Python中基于生成器的状态机
2015/04/13 Python
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
Pandas聚合运算和分组运算的实现示例
2019/10/17 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
解决Django no such table: django_session的问题
2020/04/07 Python
Python Switch Case三种实现方法代码实例
2020/06/18 Python
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
Europcar意大利:汽车租赁
2019/07/07 全球购物
自荐信格式的六要素
2013/09/21 职场文书
大宝sod蜜广告词
2014/03/21 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
教师创先争优承诺书
2015/04/27 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL