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 相关文章推荐
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
js实现简洁大方的二级下拉菜单效果代码
Sep 01 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
Sep 14 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
vue.js 左侧二级菜单显示与隐藏切换的实例代码
May 23 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
微信小程序实现注册登录功能(表单校验、错误提示)
Dec 10 Javascript
Node.js中出现未捕获异常的处理方法
Jun 29 Javascript
Vue项目中如何封装axios(统一管理http请求)
May 02 Vue.js
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
《魔兽世界》惊魂幻象将获得调整
2020/03/08 其他游戏
PHP数组操作汇总 php数组的使用技巧
2011/07/17 PHP
php去除HTML标签实例
2013/11/06 PHP
PHP中的Streams详细介绍
2014/11/12 PHP
JQuery 插件模板 制作jquery插件的朋友可以参考下
2010/03/17 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
JS 设置Cookie 有效期 检测cookie
2017/06/15 Javascript
微信小程序 获取二维码实例详解
2017/06/23 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
vue中各种通信传值方式总结
2019/02/14 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题
2020/09/02 Javascript
原生JS运动实现轮播图
2021/01/02 Javascript
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
[01:14:41]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第一场 1月8日
2021/03/11 DOTA
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python命名空间(namespace)简单介绍
2019/08/10 Python
详解python 中in 的 用法
2019/12/12 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
Windows下pycharm安装第三方库失败(通用解决方案)
2020/09/17 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Dower & Hall官网:英国小众轻奢珠宝品牌
2019/01/31 全球购物
试用期转正鉴定评语
2014/01/27 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
安全生产先进个人总结
2015/02/15 职场文书
个人年终总结结尾
2015/03/06 职场文书
女性健康讲座主持词
2015/07/04 职场文书
8个JS的reduce使用实例和reduce操作方式
2021/10/05 Javascript
Python 中的 copy()和deepcopy()
2021/11/07 Python
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android