Vue多文件学习项目综合案例——购物车,黑马vue教程

一、项目截图

在这里插入图片描述

二、主要知识点

  • vuex的使用
  • json-server的使用
    json-server --watch index.json
    

三、需要注意的点

  • json-server 安装成功,查看版本直接报错。安装默认版本埋下的一个坑,和node版本不匹配
  • 作者直接安装vuex,默认安装也是版本不匹配,启动没报错,但是没法使用。作者是vue2版本,使用的vuex@3.1.1版本,安装的时候指定版本就好了

四、Main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'Vue.config.productionTip = falsenew Vue({store,render: h => h(App)
}).$mount('#app')

五、App.vue

<template><div class="app-container"><!-- Header 区域 --><cart-header></cart-header><!-- 商品 Item 项组件 --><cart-item v-for="item in list" :key="item.id" :item="item"></cart-item><!-- Foote 区域 --><cart-footer></cart-footer></div>
</template><script>
import CartHeader from '@/components/cart-header.vue'
import CartFooter from '@/components/cart-footer.vue'
import CartItem from '@/components/cart-item.vue'
import {mapState} from "vuex";export default {name: 'App',components: {CartHeader,CartFooter,CartItem},computed:{...mapState('cart',['list'])},created() {this.$store.dispatch('cart/getList')}
}
</script><style lang="less" scoped>
.app-container {padding: 50px 0;font-size: 14px;
}
</style>

六、components

cart-footer.vue

<template><div class="footer-container"><!-- 中间的合计 --><div><span>共 {{total}} 件商品,合计:</span><span class="price">¥{{ totalPrice}}</span></div><!-- 右侧结算按钮 --><button class="btn btn-success btn-settle">结算</button></div>
</template><script>
import {mapGetters} from 'vuex'export default {name: 'CartFooter',computed: {...mapGetters('cart', ['total', 'totalPrice'])}
}
</script><style lang="less" scoped>
.footer-container {background-color: white;height: 50px;border-top: 1px solid #f8f8f8;display: flex;justify-content: flex-end;align-items: center;padding: 0 10px;position: fixed;bottom: 0;left: 0;width: 100%;z-index: 999;
}.price {color: red;font-size: 13px;font-weight: bold;margin-right: 10px;
}.btn-settle {height: 30px;min-width: 80px;margin-right: 20px;border-radius: 20px;background: #42b983;border: none;color: white;
}
</style>

cart-header.vue

<template><div class="header-container">购物车案例</div>
</template><script>
export default {name: 'CartHeader'
}
</script><style lang="less" scoped>
.header-container {height: 50px;line-height: 50px;font-size: 16px;background-color: #42b983;text-align: center;color: white;position: fixed;top: 0;left: 0;width: 100%;z-index: 999;
}
</style>

cart-item.vue

<template><div class="goods-container"><!-- 左侧图片区域 --><div class="left"><img :src="item.thumb" class="avatar" alt=""></div><!-- 右侧商品区域 --><div class="right"><!-- 标题 --><div class="title">{{ item.name }}</div><div class="info"><!-- 单价 --><span class="price">{{ item.price }}</span><div class="btns"><!-- 按钮区域 --><button class="btn btn-light" @click="btnClick(-1)">-</button><span class="count">{{ item.count }}</span><button class="btn btn-light" @click="btnClick(1)">+</button></div></div></div></div>
</template><script>
export default {name: 'CartItem',props: {item: {type: Object,request: true}},methods: {btnClick(step) {const newCount = this.item.count + step;const id = this.item.id;if (newCount < 1) return;this.$store.dispatch('cart/updateCountAsync', {id,newCount})}}
}
</script><style lang="less" scoped>
.goods-container {display: flex;padding: 10px;+ .goods-container {border-top: 1px solid #f8f8f8;}.left {.avatar {width: 100px;height: 100px;}margin-right: 10px;}.right {display: flex;flex-direction: column;justify-content: space-between;flex: 1;.title {font-weight: bold;}.info {display: flex;justify-content: space-between;align-items: center;.price {color: red;font-weight: bold;}.btns {.count {display: inline-block;width: 30px;text-align: center;}}}}
}.custom-control-label::before,
.custom-control-label::after {top: 3.6rem;
}
</style>

七、store

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import cart from "./modules/cart";Vue.use(Vuex)export default new Vuex.Store({modules: {cart}
})

modules/cart.js

import axios from "axios";export default {namespaced: true,state() {return {//购物车数据list: []}},mutations: {updateList(state, newList) {state.list = newList}},actions: {async getList(context) {const res = await axios.get("http://localhost:3000/cart")context.commit('updateList', res.data)},async updateCountAsync(context, obj) {await axios.patch(`http://localhost:3000/cart/${obj.id}`, {count: obj.newCount})//当前的this指向$storethis.dispatch('cart/getList')}},getters: {//商品总数total(state) {return state.list.reduce((sum, item) => sum + item.count, 0);},//商品总价totalPrice(state) {return state.list.reduce((sum, item) => sum + item.count * item.price, 0);}}
}

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

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

相关文章

C语言案例01, 输入两个整数,获得两个数加减乘除的值,持续更新中~

一.题目 /* 输入两个整数,获得两个数加减乘除的值 */ *///头文件 #include <stdio.h>//主方法 int main() {//声明两个int类型的变量int a;int b;//提示用用户输入printf("请输入两个整数!\n");//用scanf 获取a和b在内存中的值scanf("%d%d",&a…

ai智能外呼机器人的功能,机器人对话常用语模板搭建

智能外呼机器人就是用来往外呼出打电话的;经常看到有文章说电话机器人将要代替传统人工话务员、电话销售员要失业了、外呼机器人要颠覆电销革命了等等&#xff0c;我想说的是&#xff0c;目前市场上的电话机器人还远远不能达到&#xff0c;未来几年内也不一定会实现。 下面就简…

鸿蒙Harmony应用开发—ArkTS声明式开发(容器组件:Panel)

可滑动面板&#xff0c;提供一种轻量的内容展示窗口&#xff0c;方便在不同尺寸中切换。 说明&#xff1a; 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 可以包含子组件。 说明&#xff1a; 子组件类型&a…

QMI8658芯片I2C驱动开发指南

这个芯片纯国产挺好用的&#xff0c;电路很好设计&#xff0c;我这垃圾焊功&#xff0c;纯手焊&#xff0c;&#xff0c;居然能用。 第一部分 硬件连接 画的很简陋&#xff0c;看看就可以了&#xff0c;这里I2C总线需要接10K上拉没有画出来&#xff0c;这个需要注意一下。 …

树形结构 一篇文章梳理

树形结构是一种非常重要的非线性数据结构&#xff0c;它模拟了具有层次关系的数据模型。在树形结构中&#xff0c; 目录 一、组成元素&#xff1a; 二、树的属性&#xff1a; 深度或高度 度 路径 路径长度 三、树的类型 1 二叉树 2 多叉树 3 完全二叉树 4 满二叉树…

【计算机网络_传输层】UDP和TCP协议

文章目录 1. 重新理解端口号端口号划分netstat指令pidof 2. UDP协议2.1 UDP协议端格式2.2 UDP的特点2.3 UDP的注意事项2.4 基于UDP的应用层协议 3. TCP协议&#xff08;传输控制协议&#xff09;3.1 TCP协议的格式和报头字段3.2 如何解包和分用3.3 理解TCP协议报头3.4 TCP协议的…

day-20 二叉树的层序遍历

思路&#xff1a;利用队列进行广度优先遍历即可 注意点&#xff1a;ArrayList执行remove之后&#xff0c;索引i会立即重排&#xff0c;注意可能越界 code: /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeN…

[Java、Android面试]_05_内存泄漏和内存溢出

本人今年参加了很多面试&#xff0c;也有幸拿到了一些大厂的offer&#xff0c;整理了众多面试资料&#xff0c;后续还会分享众多面试资料。 整理成了面试系列&#xff0c;由于时间有限&#xff0c;每天整理一点&#xff0c;后续会陆续分享出来&#xff0c;感兴趣的朋友可关注收…

Xcode调试Qt 源码

在Mac下使用Xcode 开发Qt程序&#xff0c;由于程序断点或者崩溃后&#xff0c;Qt库的堆栈并不能够正确定位到源码的cpp文件&#xff0c;而是显示的是汇编代码&#xff0c;导致不直观的显示。 加载的其他三方库都是同理。 所以找了攻略和研究后&#xff0c;写的这篇文章。 一&a…

SIP调试之SIPP测试工具

SIPP是针对SIP协议的一个性能测试的命令行工具&#xff0c;可以动态显示测试的统计信息&#xff08;如呼叫速率、延时、消息统计等&#xff09;。用户可以通过XML场景配置文件&#xff0c;自定义模拟各种UAC/UAS测试场景的信令交互流程&#xff0c;可以被用来测试IP话机、SIP代…

【IC设计】Verilog线性序列机点灯案例(二)(小梅哥课程)

文章目录 该系列目录&#xff1a;设计目标设计思路RTL 及 Testbench仿真结果存在的问题&#xff1f;改善后的代码RTL代码testbench代码 仿真结果 案例和代码来自小梅哥课程&#xff0c;本人仅对知识点做做笔记&#xff0c;如有学习需要请支持官方正版。 该系列目录&#xff1a;…

Nexus如何导入jar以及批量导入Maven的本地库目录

上传依赖包到Nexus 服务器的方式有多种, 包含: 1.单个jar上传: 在Nexus管理台页面上传单个jar 2.源码编译上传:在源码项目中使用 Maven的deploy 命令发布 3. 使用脚本批量上传Maven本地库的目录 前言 本篇基于 Nexus 的版本是 nexus-3.55.0-01本方法适用Linux和WindowsWind…

C++中using 和 typedef 的区别

C中using 和 typedef 的区别_typedef using-CSDN博客 在C中&#xff0c;“using”和“typedef”执行声明类型别名的相同任务。两者之间没有重大区别。C中的“Using”被认为是类型定义同义词。此方法也称为别名声明。定义这些别名声明的工作方式类似于使用“using”语句定义C中…

MySQL-HMA 高可用故障切换

本章内容&#xff1a; 了解MySQL MHA搭建MySQL MHAMySQL MHA故障切换 1.案例分析 1.1.1案例概述 目前 MySQL 已经成为市场上主流数据库之一&#xff0c;考虑到业务的重要性&#xff0c;MySQL 数据库 单点问题已成为企业网站架构中最大的隐患。随着技术的发展&#xff0c;MHA…

【四 (2)数据可视化之 Matplotlib 常用图表及代码实现 】

目录 文章导航一、介绍二、安装Matplotlib三、导入Matplotlib四、设置可以中文显示四、常用图形1、散点图&#xff08;Scatter Plot&#xff09;2.1、线性图&#xff08;Line Plot&#xff09;2.2、堆叠折线图2.3、多图例折线图3.1、柱状图/条形图&#xff08;Bar Chart&#x…

PostgreSQL中vacuum 物理文件truncate发生的条件

前言 前段时间&#xff0c;有些同学说到vacuum截断的行为时&#xff0c;认为&#xff0c;只要末尾是空页&#xff0c;无论多少&#xff0c;都会被截断&#xff0c;真是这样的吗&#xff1f; PostgreSQL当中&#xff0c;由于vacuum的操作并不总能将死元组的空间进行”物理截断…

React——关于JSX

JSX的概述 为什么要学习jsx&#xff1f; ​ 我们在初建react项目的时候&#xff0c;需要使用到react.creatElement去写虚拟dom&#xff0c;在编写过程中太繁琐不直观&#xff0c;不利于开发&#xff0c;而jsx就是解决这个问题&#xff0c;可以直接写一段类似HTML的代码去代替…

【设计模式】Java 设计模式之桥接模式(Bridge)

桥接模式&#xff08;Bridge Pattern&#xff09;深入解析 一、桥接模式概述 桥接模式是一种结构型设计模式&#xff0c;它将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。桥接模式是一种非常有用的设计模式&#xff0c;在软件系统中&#xff0c;某些类型…

HNU-计算机系统-实验1-原型机vspm1.0-(二周目玩家视角)

前言 二周目玩家&#xff0c;浅试一下这次的原型机实验。总体感觉跟上一年的很相似&#xff0c;但还是有所不同。 可以比较明显地感觉到&#xff0c;这个界面越来越好看了&#xff0c;可操作与可探索的功能也越来越多了。 我们HNU的SYSTEM真的越来越好了&#xff01;&#x…

流程引擎接入设计

流程引擎接入设计 文章目录 流程引擎接入设计流程基础信息接入通用流程模型HDFS path删除工单类型工单流程图工单流程表与工单类型详细表关联关系流程基础信息 接入通用流程模型 交互过程 #mermaid-svg-UqP5icyFfibTMWRb {font-family:"trebuchet ms",verdana,aria…