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 相关文章推荐
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
利用JQuery和JS实现奇偶行背景颜色自定义效果
Nov 19 Javascript
javascript中的循环语句for语句深入理解
Apr 04 Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 Javascript
JS+CSS实现电子商务网站导航模板效果代码
Sep 10 Javascript
iOS + node.js使用Socket.IO框架进行实时通信示例
Apr 14 Javascript
React利用插件和不用插件实现双向绑定的方法详解
Jul 03 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
JS获取动态添加元素的方法详解
Jul 31 Javascript
解决vant-UI库修改样式无效的问题
Nov 03 Javascript
vue 在单页面应用里使用二级套嵌路由
Dec 19 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
6种php上传图片重命名的方法实例
2013/11/04 PHP
php类声明和php类使用方法示例分享
2014/03/29 PHP
php从数组中随机选择若干不重复元素的方法
2015/03/14 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery的选择器的使用技巧之如何选择input框
2013/09/22 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
2013/11/30 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
2016/07/09 Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
2020/06/29 Javascript
nodejs实现大文件(在线视频)的读取
2020/10/16 NodeJs
JavaScript学习笔记之图片库案例分析
2019/01/08 Javascript
详解微信小程序网络请求接口封装实例
2019/05/02 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
[53:10]Secret vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
[04:14]从西雅图到上海——玩家自制DOTA2主题歌曲应援TI9
2019/07/11 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
flask中主动抛出异常及统一异常处理代码示例
2018/01/18 Python
Python中创建二维数组
2018/10/17 Python
python 利用for循环 保存多个图像或者文件的实例
2018/11/09 Python
Python-接口开发入门解析
2019/08/01 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
大学生毕业求职简历的自我评价
2013/10/24 职场文书
《自然之道》教学反思
2014/02/11 职场文书
3分钟英语演讲稿
2014/04/29 职场文书
篮球赛口号
2014/06/18 职场文书
委托书的格式
2014/08/01 职场文书
交警作风整顿剖析材料
2014/10/11 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
红色影片观后感
2015/06/18 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书