Vuex实现购物车小功能


Posted in Javascript onAugust 17, 2020

Vuex实现购物车功能(附:效果视频),供大家参考,具体内容如下

功能描述:

  • 加购
  • 删除
  • 加减
  • 全选反选
  • 选中计算总价
  • 存储

整体演示效果如下:

Vuex实现购物车小功能

首先介绍一下Vuex:

Vuex 实例对象属性 主要有下面5个核心属性:

state : 全局访问的state对象,存放要设置的初始状态名及值(必须要有)

mutations : 里面可以存放改变 state 的初始值的方法 ( 同步操作?必须要有 )

getters: 实时监听state值的变化可对状态进行处理,返回一个新的状态,相当于store的计算属性(不是必须的)

actions : 里面可以存放用来异步触发 mutations 里面的方法的方法 ( 异步操作?不是必须的 )

modules : 存放模块化的数据(不是必须的)

一、主页面Home:

<template>
 <div id="app">
  <div class="nav-top">
   <!--  标签栏-->
   <van-nav-bar
    title="商品列表页"
    left-arrow
   />
  </div>
  <div class="nav-bottom">
   <!--  商品卡片-->
   <van-card
    v-for="item in goodsList"
    :price="item.actualPrice"
    :desc="item.desc"
    :title="item.dtitle"
    :thumb="item.mainPic"
   >
   <template #num>
    <van-icon name="shopping-cart-o" color="red" size="24px" @click="add(item)"/>
   </template>
   </van-card>
  </div>
 </div>
</template>

<script>

 export default {
  data() {
   return {
   goodsList: [], // 商品列表数据
   }
  },
  // 请求商品列表数据
  mounted() {
  // 接口不予展示,有需要请自行下载
   this.$axios.get('api接口').then(res => {
   this.goodsList = res.data.data.data
   // console.log(this.goodsList)
   })
  },
  methods: {
   // 添加商品 调用vuex中的add方法
   add(item) {
   this.$store.commit('add', item)
   }
  }
 }
</script>

<style lang="scss" scoped>
 #app {
  .nav-top {
   width: 100%;
   position: fixed;
   top: 0;
   left: 0;
   z-index: 9;
  }
  .nav-bottom {
   margin-top: 50px;
  }
 }
</style>

二、购物车页面ShopCart:

<template>
 <div>
  <!--  标签栏-->
  <van-nav-bar
   title="购物车"
   left-arrow
   @click-left="back"
  />
  <!--  购物车box -->
  <div class="car-box" v-for="(item,index) in list" :key="index">
   <!-- 左侧复选框布局-->
   <div class="car-box-left">
   <van-checkbox v-model="item.ckd"></van-checkbox>
   </div>
   <!-- 右侧商品卡片布局-->
   <div class="car-box-right">
   <van-swipe-cell>
    <van-card
      :price="item.item.actualPrice"
      :title="item.item.dtitle"
      :thumb="item.item.mainPic"
    >
     <!-- 步进器-->
     <template #num>
      <van-stepper v-model="item.num" theme="round" button-size="22" disable-input
         @change="changeNum(item.num)"/>
     </template>
    </van-card>
    <!--  右侧滑动删除-->
    <template #right>
     <van-button square text="删除" type="danger" class="delete-button" @click="del(index)"/>
    </template> 
   </van-swipe-cell>
   </div>
  </div>
  <!-- 空状态 没数据显示 有数据隐藏-->
  <van-empty
   v-show="$store.state.cartList.length==0"
   class="custom-image"
   image="https://img.yzcdn.cn/vant/custom-empty-image.png"
   description="购物车是空的哟!"
  />
  <!--  商品导航-->
  <van-submit-bar :price="$store.getters.total*100" button-text="提交订单">
   <van-checkbox v-model="checkAll">全选</van-checkbox>
  </van-submit-bar>

 </div>
</template>

<script>
 import {mapMutations} from 'vuex'
 export default {
  data() {
   return {
   list: this.$store.state.cartList, //购物车数据
   }
  },
  computed: {
   // 计算属性checkAll 和全选按钮双向数据绑定,别人可以控制它 它也可以控制别人
   // 别人控制它 给他一个值的时候是 get , 它控制别人 给别人设置值的时候 是set
   // 在set中newVal参数是这个计算属性改变后的值
   checkAll: { //可以看作一个事件
   get() {
    // 判断购物车里商品的长度为0 return false
    if (this.list.length == 0) {
     return false
    }
    return this.$store.state.cartList.every(item => {
     return item.ckd == true // 返回结果复选框为true
    })
   },
   set(newVal) {
    this.$store.commit('ckd', newVal)
   },
   }
  },
  methods: {
   // 返回商品列表页
   back() {
   this.$router.push({
    path: '/'
   })
   },
   //方法集合
   ...mapMutations(['del', 'changeNum',])
  },
 }
</script>

<style lang="scss" scoped>
 .goods-card {
  margin: 0;
  background-color: white;
 }
 .delete-button {
  height: 100%;
 }
 .car-box {
  width: 100%;
  margin-bottom: 5px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  .car-box-left {
   flex: 1;
   padding-left: 10px;
  }
  .car-box-right {
   flex: 12;
  }
 }
</style>

三、Vuex代码:

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersist from 'vuex-persist'

Vue.use(Vuex);

export default new Vuex.Store({
 state: {
  cartList: [], // 购物车数据
 },
 mutations: {
  // 添加商品
  add(state, item) {
   // console.log(item)
   let flag = false;
   // 加购去重(通过id判断)
   state.cartList.forEach(i => {
   if (i.item.id == item.id) {
    i.num++;
    flag = true;
   }
   })
   if (flag == false) {
   state.cartList.push({
    num: 1, // 添加数量默认为1
    item, // 添加购物车商品数据
    ckd: false, // 添加复选框初始化状态为false
   })
   }
   // console.log(state.cartList)
  },
  // 删除商品
  del(state, index) {
   state.cartList.splice(index, 1)
   // state.
  },
  // 改变数量------加减综合法 !!!
  changeNum(state, index) {
   state.cartList.num = index
  },
  // 全选全不选
  ckd(state, newAll) {
   state.cartList.forEach(item => {
   item.ckd = newAll
   })
  }

 },
 // 计算 getters
 getters: {
  // 总价
  total(state) {
   let sum = 0;
   state.cartList.forEach(item => {
   // 如果复选框选中 计算总价
   if (item.ckd == true) {
    sum += item.item.actualPrice * item.num
   }
   })
   return sum
  }
 },
 actions: {},
 modules: {},
 // Vuex存储插件
 plugins: [
  new VuexPersist({
   storage: window.localStorage,
  }).plugin,
 ]
})

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

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

Javascript 相关文章推荐
javascript Math.random()随机数函数
Nov 04 Javascript
jQuery类选择器用法实例
Dec 23 Javascript
jQuery手机浏览器中拖拽动作的艰难性分析
Feb 04 Javascript
JSONObject使用方法详解
Dec 17 Javascript
JS代码随机生成姓名、手机号、身份证号、银行卡号
Apr 27 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
详解如何用typescript开发koa2的二三事
Nov 13 Javascript
150行代码带你实现微信小程序中的数据侦听
May 17 Javascript
JS使用正则表达式判断输入框失去焦点事件
Oct 16 Javascript
vue制作抓娃娃机的示例代码
Apr 17 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 Javascript
Vue将props值实时传递 并可修改的操作
Aug 09 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 #jQuery
jQuery实现异步上传一个或多个文件
Aug 17 #jQuery
vue项目里面引用svg文件并给svg里面的元素赋值
Aug 17 #Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 #Javascript
Vue如何将页面导出成PDF文件
Aug 17 #Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 #Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 #Javascript
You might like
在PWS上安装PHP4.0正式版
2006/10/09 PHP
小程序微信退款功能实现方法详解【基于thinkPHP】
2019/05/05 PHP
Laravel 6.2 中添加了可调用容器对象的方法
2019/10/22 PHP
JS自调用匿名函数具体实现
2014/02/11 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
微信小程序用户自定义模版用法实例分析
2017/11/28 Javascript
详解webpack模块化管理和打包工具
2018/04/21 Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
2018/10/09 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
JavaScript多种图形实现代码实例
2020/06/28 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
python django生成迁移文件的实例
2019/08/31 Python
Python程序控制语句用法实例分析
2020/01/14 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
金智子午JAVA面试题
2015/09/04 面试题
会计电算化大学生职业规划书
2014/02/05 职场文书
个人承诺书
2014/03/26 职场文书
补充协议书
2015/01/28 职场文书
教师工作决心书
2015/02/04 职场文书
放假通知
2015/04/14 职场文书
三八妇女节新闻稿
2015/07/17 职场文书
网络营销实训总结
2015/08/03 职场文书
基于Python实现的购物商城管理系统
2021/04/27 Python
JavaScript中isPrototypeOf函数
2021/11/07 Javascript
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android