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

 更新时间:2020年06月28日 10:44:47   作者:缘飞梦  
这篇文章主要为大家详细介绍了vuex实现购物车的增加减少移除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

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

相关文章

  • vue element-ui导航实现全屏/取消全屏功能

    vue element-ui导航实现全屏/取消全屏功能

    这篇文章主要介绍了vue element-ui导航实现全屏/取消全屏功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08
  • vue利用插件实现按比例切割图片

    vue利用插件实现按比例切割图片

    这篇文章主要为大家详细介绍了vue利用插件实现按比例切割图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • vite+vue3+element-plus搭建项目的踩坑记录

    vite+vue3+element-plus搭建项目的踩坑记录

    这篇文章主要介绍了vite+vue3+element-plus搭建项目的踩坑记录,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue结合ElementUI实现数据请求和页面跳转功能(最新推荐)

    Vue结合ElementUI实现数据请求和页面跳转功能(最新推荐)

    我们在Proflie.vue实例中,有beforeRouteEnter、beforeRouteLeave两个函数分别是进入路由之前和离开路由之后,我们可以在这两个函数之内进行数据的请求,下面给大家分享Vue结合ElementUI实现数据请求和页面跳转功能,感兴趣的朋友一起看看吧
    2024-05-05
  • VUE项目实现主题切换的多种方法

    VUE项目实现主题切换的多种方法

    这篇文章主要介绍了VUE项目实现主题切换的方法,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-11-11
  • vue.js图片转Base64上传图片并预览的实现方法

    vue.js图片转Base64上传图片并预览的实现方法

    这篇文章主要介绍了vue.js图片转Base64上传图片并预览的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • Vue中.prettierrc文件的常见配置(浅显易懂)

    Vue中.prettierrc文件的常见配置(浅显易懂)

    这篇文章主要介绍了Vue中.prettierrc文件的常见配置,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • Vuex模块化与持久化深入讲解

    Vuex模块化与持久化深入讲解

    在实际项目开发过程中,如果公共数据比较多我们会使用vuex做公共状态管理,但是在对浏览器进行刷新操作的时候,会导致vuex内的数据丢失,这种情况有些时候是没问题的,但是有的时候我们需要某些数据可以持久化的保存,这样就需要做对应的处理
    2023-01-01
  • Vue电商网站首页内容吸顶功能实现过程

    Vue电商网站首页内容吸顶功能实现过程

    电商网站的首页内容会比较多,页面比较长,为了能让用户在滚动浏览内容的过程中都能够快速的切换到其它分类。需要分类导航一直可见,所以需要一个吸顶导航的效果。目标:完成头部组件吸顶效果的实现
    2023-04-04
  • 解决Vue打包上线之后部分CSS不生效的问题

    解决Vue打包上线之后部分CSS不生效的问题

    今天小编就为大家分享一篇解决Vue打包上线之后部分CSS不生效的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11

最新评论