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 汉字字节判断
Aug 01 Javascript
jQuery EasyUI API 中文文档 - NumberBox数字框
Oct 13 Javascript
JS打开新窗口的2种方式
Apr 18 Javascript
js内存泄露的几种情况详细探讨
May 31 Javascript
js倒计时小程序
Nov 05 Javascript
javascript中的self和this用法小结
Feb 08 Javascript
JavaScript通过正则表达式实现表单验证电话号码
Mar 07 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
Apr 03 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
JavaScript仿百度图片浏览效果
Nov 23 Javascript
简单了解JavaScript arguement原理及作用
May 28 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
thinkphp的静态缓存用法分析
2014/11/29 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
前后台交互过程中json格式如何解析以及如何生成
2012/12/26 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)
2016/06/24 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
vue-resouce设置请求头的三种方法
2017/09/12 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
vue用ant design中table表格,点击某行时触发的事件操作
2020/10/28 Javascript
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Pyhton中防止SQL注入的方法
2015/02/05 Python
Python实现简单拆分PDF文件的方法
2015/07/30 Python
python 性能提升的几种方法
2016/07/15 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
解决python中导入win32com.client出错的问题
2019/07/26 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
python 中的9个实用技巧,助你提高开发效率
2020/08/30 Python
后勤服务中心总经理工作职责
2014/03/03 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
开学典礼演讲稿
2014/05/23 职场文书
个人违纪检讨书
2014/09/15 职场文书
六查六看自查报告
2014/10/14 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
教学质量月活动总结
2015/05/11 职场文书
Python包管理工具pip的15 个使用小技巧
2021/05/17 Python
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js