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中[attribute!=value]选择器用法实例
Dec 31 Javascript
JS对字符串编码的几种方式使用指南
May 14 Javascript
jQuery实现的超链接提示效果示例【附demo源码下载】
Sep 09 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
简单实现js菜单栏切换效果
Mar 04 Javascript
vue增删改查的简单操作
Jul 15 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
Apr 10 Javascript
vue 动态组件用法示例小结
Mar 06 Javascript
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
在JavaScript中调用php程序
2009/03/09 PHP
php ss7.5的数据调用 (笔记)
2010/03/08 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
PHP实现通过URL提取根域名
2016/03/31 PHP
PHP实现计算器小功能
2020/08/28 PHP
详解CSS样式中的 !important * _ 符号
2021/03/09 HTML / CSS
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
2007/02/05 Javascript
JAVASCRIPT IE 与 FF中兼容问题小结
2009/02/18 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
2009/12/09 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
js实现文本框宽度自适应文本宽度的方法
2015/08/13 Javascript
JQuery点击事件回到页面顶部效果的实现代码
2016/05/24 Javascript
jQuery easyui刷新当前tabs的方法
2016/09/23 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
Node.js v8.0.0正式发布!看看带来了哪些主要新特性
2017/06/02 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
详解angular部署到iis出现404解决方案
2018/08/14 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
javascript事件循环event loop的简单模型解释与应用分析
2020/03/14 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
详解Python IO编程
2020/07/24 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
基督教卡片、励志礼品、家居装饰等:DaySpring
2018/10/12 全球购物
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
业务总经理岗位职责
2014/02/03 职场文书
超市员工管理制度
2015/08/06 职场文书
C#连接ORACLE出现乱码问题的解决方法
2021/10/05 Oracle