vuex实现购物车的增加减少移除


Posted in Javascript onJune 28, 2020

本文实例为大家分享了vuex实现购物车增加减少移除的具体代码,供大家参考,具体内容如下

1.store.js(公共的仓库)

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
export default new Vuex.Store({
 state: {
  carList: [] //购物车的商品
 },
 mutations: {
  // 加
  addCar(state, params) {
   let CarCon = state.carList;
   // 判断如果购物车是否有这个商品,有就只增加数量,否则就添加一个
   // some 只要有一个isHas为true,就为true
   let isHas = CarCon.some((item) => {
    if (params.id == item.id) {
     item.num++;
     return true;
    } else {
     return false;
    }
   })
 
   if (!isHas) {
    let obj = {
     "id": params.id,
     "title": params.title,
     "price": params.price,
     "num": 1,
    }
    this.state.carList.push(obj)
   }
  },
  // 减
  reducedCar(state,params){
   let len=state.carList.length;
   for(var i=0;i<len;i++){
    if(state.carList[i].id==params.id){
     state.carList[i].num--
     if(state.carList[i].num==0){
      state.carList.splice(i,1);
      break;
     }
    }
   }
  },
  //移出
  deleteCar(state,params){
   let len=state.carList.length;
   for(var i=0;i<len;i++){
    if(state.carList[i].id==params.id){
     state.carList.splice(i,1);
     break;
    }
   }
  },
 
   // 初始化购物车,有可能用户一登录直接进入购物车
  // initCar(state, car) {
  //  state.carList = car
  // },
 
 },
 actions: {
  // 加
  addCar({ commit }, params) {
   // console.log(params) //点击添加传过来的参数
   // 使用setTimeout模拟异步获取购物车的数据
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交给mutations
     commit("addCar", params)
    }
   }, 100)
  },
  // 减
  reducedCar({ commit }, params) {
   // console.log(params) //点击添加传过来的参数
   // 使用setTimeout模拟异步获取购物车的数据
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交给mutations
     commit("reducedCar", params)
    }
   }, 100)
  },
  // 移出
  deleteCar({ commit }, params) {
   // console.log(params) //点击添加传过来的参数
   // 使用setTimeout模拟异步获取购物车的数据
   setTimeout(function () {
    let result = 'ok'
    if (result == 'ok') {
     // 提交给mutations
     commit("deleteCar", params)
    }
   }, 100)
  }
  // initCar({ commit }) {
  //  setTimeout(function () {
  //   let result = 'ok'
  //   if (result == 'ok') {
  //    // 提交给mutations
  //    commit("initCar", [{
  //     "id": 20193698,
  //     "title": '我是购物车原来的',
  //     "price": 30,
  //     "num": 100,
  //    }])
  //   }
  //  }, 100)
  // }
 },
 getters: {
  //返回购物车的总价
  totalPrice(state) {
   let Carlen = state.carList;
   let money = 0;
   if (Carlen.length != 0) {
    Carlen.forEach((item) => {
     money += item.price * item.num
    })
    return money;
   } else {
    return 0;
   }
  },
  //返回购物车的总数
  carCount(state) {
   return state.carList.length
  }
 },
})

2. list.vue(商品列表)

<template>
 <!-- 商品列表 -->
 <div id="listBox">
 <!-- -->
 <router-link :to="{path:'/car'}" style="line-height:50px">跳转到购物车</router-link>
 <el-table :data="tableData" border style="width: 100%">
  <el-table-column fixed prop="id" align="center" label="商品id"></el-table-column>
  <el-table-column prop="title" align="center" label="商品标题"></el-table-column>
  <el-table-column prop="price" align="center" label="商品价格"></el-table-column>
  <el-table-column label="操作" align="center">
  <template slot-scope="scope">
   <el-button @click="addCar(scope.row)" type="text" size="small">加入购物车</el-button>
  </template>
  </el-table-column>
 </el-table>
 </div>
</template>
 
<script>
export default {
 name: "listBox",
 data() {
 return {
  tableData: [] //商品列表
 };
 },
 methods: {
 // 初始化商品列表
 initTable(){
  this.$gAjax(`../static/shopList.json`)
  .then(res => {
   console.log(res)
   this.tableData=res;
  })["catch"](() => {});
 },
 // 加入购物车
 addCar(row){
  // console.log(row)
  // 提交给store里面actions 由于加入购物车的数据要同步到后台
  this.$store.dispatch('addCar',row)
 }
 
 },
 mounted () {
 this.initTable()
 }
};
</script>
<style>
#listBox {
 width: 900px;
 margin: 0 auto;
}
</style>

3. car.vue(购物车)

<template>
 <!-- 购物车 -->
 <div id="carBox">
 <!-- 商品总数 -->
 <h2 style="line-height:50px;font-size:16px;font-weight:bold">合计:总共{{count}}个商品,总价{{totalPrice}}元</h2>
 <p v-if="count==0">空空如也!·······</p>
 <div v-else>
  <el-table :data="carData" border style="width: 100%">
  <el-table-column fixed prop="id" align="center" label="商品id"></el-table-column>
  <el-table-column prop="title" align="center" label="商品标题"></el-table-column>
  <el-table-column prop="price" align="center" label="商品价格"></el-table-column>
  <el-table-column label="操作" align="center">
   <template slot-scope="scope">
   <el-button @click="reduceFun(scope.row)" type="text" size="small">-</el-button>
   <span >{{scope.row.num}}</span>
   <el-button @click="addCar(scope.row)" type="text" size="small">+</el-button>
 
   <el-button @click="deleteFun(scope.row)" type="text" size="small">删除</el-button>
   </template>
  </el-table-column>
  </el-table>
 </div>
 </div>
</template>
 
<script>
export default {
 name: "carBox",
 data() {
 return {};
 },
 computed: {
 //购物车列表
 carData() {
  return this.$store.state.carList;
 },
 //商品总数
 count() {
  return this.$store.getters.carCount;
 },
 //商品总价
 totalPrice() {
  return this.$store.getters.totalPrice;
 }
 },
 methods: {
 // 增加数量
 addCar(row){
  this.$store.dispatch('addCar',row)
 },
 // 减数量
 reduceFun(row){
  this.$store.dispatch('reducedCar',row)
 },
 // 删除
 deleteFun(row){
  this.$store.dispatch('deleteCar',row)
 }
 
 // 用户首次登录请求购物车的数据
 // initCar(){
 // this.$store.dispatch('initCar')
 // }
 },
 created () {
 // this.initCar();
 },
 mounted() {}
};
</script>
 
<style>
#carBox {
 width: 900px;
 margin: 0 auto;
}
</style>

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

Javascript 相关文章推荐
JQuery里面的几种选择器 查找满足条件的元素$(&quot;#控件ID&quot;)
Aug 23 Javascript
解析offsetHeight,clientHeight,scrollHeight之间的区别
Nov 20 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jquery实现鼠标悬浮停止轮播特效
Aug 20 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
详解处理Vue单页面应用SEO的另一种思路
Nov 09 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 #Javascript
vuex实现购物车功能
Jun 28 #Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 #Javascript
详细分析Node.js 模块系统
Jun 28 #Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 #Javascript
js瀑布流布局的实现
Jun 28 #Javascript
JavaScript如何使用插值实现图像渐变
Jun 28 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
php 判断数组是几维数组
2013/03/20 PHP
使用php清除bom示例
2014/03/03 PHP
smarty模板引擎从php中获取数据的方法
2015/01/22 PHP
PHP的Yii框架入门使用教程
2016/02/15 PHP
解析 thinkphp 框架中的部分方法
2017/05/07 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
Laravel中为什么不使用blpop取队列详析
2018/08/01 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
jQuery 1.0.4 - New Wave Javascript(js源文件)
2007/01/15 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
JavaScript驾驭网页-获取网页元素
2016/03/24 Javascript
Vue 拦截器对token过期处理方法
2018/01/23 Javascript
vue+springboot实现项目的CORS跨域请求
2018/09/05 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
详解微信小程序框架wepy踩坑记录(与vue对比)
2019/03/12 Javascript
vue实现倒计时获取验证码效果
2020/04/17 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
JS window对象简单操作完整示例
2020/01/14 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python中线程编程之threading模块的使用详解
2015/06/23 Python
python enumerate函数的使用方法总结
2017/11/15 Python
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
美国内衣品牌:Leonisa
2016/08/14 全球购物
英语自荐信常用语句
2013/12/13 职场文书
车间操作工岗位职责
2013/12/19 职场文书
春节联欢会主持词
2014/03/24 职场文书
幼儿园区域活动总结
2014/05/08 职场文书
驾驶员安全责任书
2014/07/22 职场文书
团队拓展活动总结
2014/08/27 职场文书
详解 TypeScript 枚举类型
2021/11/02 Javascript
python index() 与 rindex() 方法的使用示例详解
2022/12/24 Python