【uniapp】利用Vuex实现购物车功能

news/2024/3/28 16:36:32/文章来源:https://blog.csdn.net/weixin_43523043/article/details/127989540

实战项目名称:实现购物车功能

文章目录

  • 一、实战步骤
    • 1. 先编辑`store.js`文件
    • 2. 定义方法和基本的结构
    • 3. 编写`SETSHPPING`
  • 二、在项目中调用
    • 1. 触发相应的`mutations`
    • 2. 利用`computed`计算数量和总价的方法


提示:本实战内容大部分为具体实现的思路,界面方面暂时不公布。

一、实战步骤

1. 先编辑store.js文件

代码如下(示例):

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {ShoppingCart: []},mutations: {SETSHPPING(state, product) {//后面再讲解具体实现},},actions: {},modules: {}
})export default store

2. 定义方法和基本的结构

object的基本结构:
{ id: “601a73e0ab8a25000ad243fe”, name: “特濃比利時朱古力”, total: 1, price: 100}

在这里插入图片描述

代码如下(示例):

// 对应增加数量add()this.sum += 1   // sum是想买的数量var pPrice = null     //这里是为了处理有没有特价处理的商品if (this.arr.special_price === null) {//没有特价则直接用pricepPrice = this.arr.price} else {//是特价则用special_pricepPrice = this.arr.special_price}let list = {id: this.arr._id,   //商品idname: this.arr.name[0].text,   //商品名称total: this.sum,    //商品数量price: pPrice    //商品价格}console.log(list)// mock数据// { id: "601a73e0ab8a25000ad243fe", name: "特濃比利時朱古力", total: 1, price: 100}// 减少数量的方法基本一致
// 只需将this.sum += 1改为 this.sum -= 1

3. 编写SETSHPPING

实现购物车的方法有很多,在这里就主要下面这一种 (思路)

    1. 先看看购物车中,是否已经有了某件产品,有的话返回产品的index下标;
    1. 如果index的值-1,则不存在有重复的产品,反之我们就利用splice()移除相应下标的值;
    1. 产品数量只有在不为0的基础上,才会更新到ShoppingCart

当然除了这一种方法还有其他,有人可能会问,为什么要整个删除再添加上去新的呢,直接改掉下标相应的total值不就行了吗?
其实,只更新total数量值是不行的,因为产品的各属性每一秒都有可能发生改变,所以整个替换掉是更符合开发逻辑的

代码如下(示例):

SETSHPPING(state, product) {let arr = store.state.ShoppingCart// 先看看购物车中,是否已经有了某件产品,有的话返回产品的index下标let index = arr.findIndex(item => {return item.id == product.id;});// console.log(index)// 如果index的值-1,则不存在有重复的产品,反之我们就移除相应下标的值if (index != -1) {arr.splice(index, 1)}// 产品数量只有在不为0的基础上,才会更新到ShoppingCart中if (product.total != 0) {state.ShoppingCart.push(product)}// console.log(state.ShoppingCart)},

二、在项目中调用

1. 触发相应的mutations

代码如下(示例):

// 这里的list就是上方提到的产品信息let list = {id: this.arr._id,   //商品idname: this.arr.name[0].text,   //商品名称total: this.sum,    //商品数量price: pPrice    //商品价格}
// 通过下方的commit,我们就可以触发mutations,进行下一步
this.$store.commit('SETSHPPING',list) 

2. 利用computed计算数量和总价的方法

利用computed可以达到购物车数据的动态更新

computed:{//计算购物车产品的总数量total(){let arr = this.$store.state.ShoppingCartvar sum = 0arr.map( (item) => {sum += item.total})return sum},// 计算购物车的总价price(){let arr = this.$store.state.ShoppingCartvar a = 0arr.map( (item) => {a += item.total * item.price})return a}}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_39177.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

FRED应用:激光二极管的模拟

简介 当提及模拟激光二极管时,FRED软件具有极大的灵活性。在这篇应用笔记中,将会描述简单到详细的激光光源模型。最基本的模型是高斯TEM0,0模。更高级的模型包括在束腰上偏移和发散中的像散光束。激光也可以使用其M2因子表示。最后,可以创…

猿如意开发工具|Sublime Text(4126)

文章目录 一、猿如意是什么? 二、如何使用猿如意下载安装Sublime Text 三、总结 一、猿如意是什么? 猿如意是一款面向开发者的辅助开发工具箱,包含了效率工具、开发工具下载,教程文档,代码片段搜索,全网搜…

Azure DevOps Server 用户组加入 Azure AD Domain Service 管理用户

一,引言 今天我们继续讲解 Azure DevOps Server 的内容,对于管理用户组除了在 Azure DevOps Server 服务器上添加管理员方式外,还有没有其他方式,Azure DevOps 需要加入Azure ADDS 服务域后,Azure DevOps Server 的管理…

oh-my-zsh 为 ls 命令自定义颜色

ls 命令默认显示的颜色是: 白色: 表示普通文件 蓝色: 表示目录 绿色: 表示可执行文件 红色: 表示压缩文件 蓝绿色: 链接文件 红色闪烁:表示链接的文件有问题 黄色: 表示设备文件 灰…

深入理解SR-IOV和IO虚拟化

一、背景 SR-IOV(Single Root I/O Virtualization)是由PCI-SIG组织定义的PCIe规范的扩展规范《Single Root I/O Virtualization and Sharing Specification》,目的是通过提供一种标准规范,为VM(虚拟机)提供…

ProcessDB实时/时序数据库——ODBC之连接数据库

目录 前言 一、安装ProcessDB-ODBC驱动 1.下载ProcessDB-ODBC驱动 2.安装ProcessDB-ODBC驱动 二、配置ProcessDB数据源 三、JAVA连接ProcessDB数据库 前言 ProcessDB实时/时序数据库支持ODBC连接数据库,接下来将和大家分享下如何使用ODBC操作ProcessDB实时/时…

基于Java Web的传智播客crm企业管理系统的设计与实现

项目描述 临近学期结束,还是毕业设计,你还在做java程序网络编程,期末作业,老师的作业要求觉得大了吗?不知道毕业设计该怎么办?网页功能的数量是否太多?没有合适的类型或系统?等等。这里根据疫情当下,你想解决的问…

tinymce富文本编辑器做评论区

今天分享一下tinymce富文本编辑器做评论区的全过程。 文章目录一、介绍1.最终效果2.功能介绍3.主要项目包版本介绍:二、每个功能的实现1.自定义toolbar的功能区①对应的样式以及意义②对应的代码实现【忽略了一切非实现该功能的代码】2.展示、收起评论区①对应的样式…

软件测试面试技巧:如何提高面试通过率?这3点一定要做到

对于想要进入到软件测试岗的新手人员来说,面试这一关是非常重要的,它直接关系着你的去留,也关系后续的期待遇问题,那么,有没有什么技巧可以帮忙提高面试通过率呢? 关于这一问题答案,我从这几个方…

Java自动化测试调试中遇到的问题

前言:记录下遇到的问题 Java自动化测试在调试中遇到的问题总结 1、遇到的Waring:must be unique [WARNING] dependencies.dependency.(groupId:artifactId:type:classifier) must be unique: com.vertica.jdbc:vertica-jdbc:jar -> duplicate declaration of version 10.…

数商云供应链管理系统助力化工行业企业实现客户订单管理可视化

订单管理是现代企业商务业务的重要组成部分,可以帮助企业解决订单管理低效、混乱等问题。随着产业互联网时代的到来,越来越多企业放弃传统费时费力的手动操作,开始应用数字化的管理工具来提高企业订单管理的水平。这里以化工行业企业为例&…

RabbitMQ 快速入门七种简单模式

RabbitMQ 快速入门七种简单模式起步七种模式项目依赖1、"Hello World!"(1) Connection 方式(2) RabbitTemplate 方式2、Work Queues生产者消费者3、Publish/Subscribe关系绑定生产者消费者4、Routing消费者生产者5. Topics消费者生产者6、RPC7、Publisher Confirms起…

09 更真实的云原生:Kubeadm实际搭建多节点的Kubernetes集群

文章目录1. 前言2. 什么是 kubeadm?2.1 kubeadm 介绍2.2 kubeadm 原理3. kubeadm 实验环境的架构是什么样的?3.1 Master 节点3.2 Worker 节点3.3 辅助节点3.4 安装前的准备工作3.4.1 修改主机名3.4.2 修改 Docker 配置3.4.3 修改网络设置3.4.4 修改交换分区4. 安装…

Android -- 每日一问:如何理解 Android 中的 Context,它有什么用?

经典回答 官方文档对于 Context 的解释: Interface to global information about an application environment. This is an abstract class whose implementation is provided by the Android system. It allows access to application-specific resources and cla…

Anaconda、Conda、pip、Virtualenv的区别

一、Anaconda 1.1 简介 Anaconda是一个包含180的科学包及其依赖项的发行版本。其包含的科学包包括:conda, numpy, scipy, ipython notebook等。 二、Conda 2.1 简述 conda是包及其依赖项和环境的管理工具。 适用语言:Python, R, Ruby, Lua, Scala, …

iOS 图标和文字自定按钮

在项目开发中,经常需要用到按钮,系统默认的按钮是图标在左边,标题在右边。但往往实际情况是多变的,有时候图标在右边、有时候图标在上面,这个时候系统的按钮往往无法满足需求,所以我们需要自定义按钮来满足…

装在笔记本里的私有云环境:K8s 集群准备

本篇是系列中的第六篇内容,继续聊聊如何把一个简化过的私有云环境部署在笔记本里,以满足低成本、低功耗、低延时的实验环境。 在前几篇内容中,我们聊过了:虚拟化、监控、基础的存储、持续集成等内容,接下来的内容中&a…

Javaweb的AJAX及Axios框架使用(封装AJAX)

概念: AJAX(Asynchronous JavaScript And XML):异步的JS和XML。 作用: 与服务器进行数据交换 :通过AJAX可以给服务器发送请求。使用AJAX和服务器进行通信,就可以使用HTMLAJAX来替换JSP页面。异步交互 :可以在不重新加载整个页面的情况下,与服务器交互…

自己搭建网站【搭建网站】

现在搭建网站也不只是企业公司商家的专利,很多个人用户都想拥有属于自己的一个网站。那么怎么自己搭建网站呢?下面给大家简单说说。 一、申请域名 域名是访问网站的地址,这是必须要有的,可以在域名服务商网站上申请。申请域名需要…

jupyter中配置多种虚拟环境

Microsoft Windows [版本 10.0.19044.2251] © Microsoft Corporation。保留所有权利。 C:\Users\ThinkStation>conda activate pytorch(pytorch) C:\Users\ThinkStation>conda install ipykernelCollecting package metadata (current_repodata.json): done Solvin…