0.实现需求

• 请求动态渲染购物车,数据存放在vuex中
• 使用数字框修改数据
• 动态计算总价和总数量

购物车的商品数量,商品价格以及下方的总价,总数量,是共用一个数据,
显然,此处可以用到vuex,这也是Vuex在Vue项目中常见的使用场景之一

1.新建购物车模块cart

• step1:新建store/modules/cart.js

export default{namespaced:true,//state写成这种形式的原因和data一样:保证组件实例化后的数据独立state(){//上面就不要const state={}了,会报错return{list:[]}}
}

• step2:挂载到vuex仓库上

import cart from "@/store/modules/cart"
const store = new Vue.Store({modules:{cart}
})

验证配置是否成功:控制台>vue>Root>cart>namespaced

2.使用json-server模拟向后端请求数据

• 安装json-server

npm install json-server -g

• 准备json数据

在vue根目录下创建db/db.json(数据可以让deepseek模拟)

{"cart": [{"id": 1,"name": "Wireless Keyboard","price": 49.99,"count": 2,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 2,"name": "Gaming Mouse","price": 59.99,"count": 1,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 3,"name": "External Hard Drive","price": 89.99,"count": 1,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 4,"name": "Bluetooth Speaker","price": 79.99,"count": 1,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 5,"name": "Smartphone Case","price": 19.99,"count": 3,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 6,"name": "Laptop Backpack","price": 39.99,"count": 1,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 7,"name": "USB Flash Drive","price": 14.99,"count": 5,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 8,"name": "Headphones","price": 69.99,"count": 1,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 9,"name": "Monitor Stand","price": 29.99,"count": 1,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"},{"id": 10,"name": "Desk Lamp","price": 24.99,"count": 1,"thumb":"https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg"}],"friends": [{"userID": 101,"name": "Alice Johnson","age": 28},{"userID": 102,"name": "Bob Smith","age": 34},{"userID": 103,"name": "Charlie Brown","age": 22}]
}

• 启动

在db目录下打开CMD:
json-server db.json

踩坑:遇到了端口号被占用的报错

\db>json-server db.json
node:internal/errors:478ErrorCaptureStackTrace(err);^
RangeError [ERR_SOCKET_BAD_PORT]: options.port should be >= 0 and < 65536. 

解决方法:指定端口号:json-server db.json --port:3008

3.在vuex请求获取并存入数据,并映射到组件中,在组件中渲染【重点】

3.1.安装axios

全局安装:npm install axios -g
局部安装:npm installl axios --save

踩坑:错误地使用了全局安装,导致在package.json中找不到axios依赖,也就调用不成功

3.2.准备actions和mutations,获取和存入数据到vuex中

过程:actions使用axios发起异步get请求获取数据,提交,触发mutations中的函数,该函数更新state的状态,
即:让空数组list存放返回的数据(res.data)

state:{return{list:[]}
},
mutations:{updateList(state,newList){state.list=newList}
},
actions:{async getData(context){const res=await axios.get("http:localhost:3008/cart");console.log(res);//查看res的层级结构context.commit("updateList",res.data);//提交,触发mutations中的方法}
}//在页面中调用:App.vue
created(){//格式:$store.dispatch("模块名/xxx")this.$store.dispatch("cart/getData")
}

3.3.动态渲染:先用mapState映射list到组件页面

//App.vuecomputed: {...mapState("cart", ["list"]),}

此时list已经获取后台json文件中的cart数组中的数据作为其元素,并通过mapState映射到组件中,
因此组件可以直接使用list进行页面渲染

//父组件App.vue
//使用v-for取出商品列表,但不在父组件直接渲染,而是设置自定义属性item,通过父传子,在子组件中渲染<div class="app-container"><cart-header></cart-header><cart-item v-for="item in list" :key="item.id" :item="item"></cart-item><cart-footer></cart-footer></div>

//子组件CartItem.vue
//html<div class="wrapper goods-container"><!-- 左侧图片 --><div class="left"><img :src="item.thumb" alt="" class="avatar"></div><!-- 右侧商品描述 --><div class="right"><!-- 标题 --><div class="title">{{item.name}}</div><div class="info"><!-- 单价 --><div class="price">¥{{item.price}}</div><!-- 按钮区域 --><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>//js
//通过props属性接收父组件传过来的参数itemprops: {item:{type:Object,required:true}}//css(****不重要****)
.goods-container {display: flex;
}.left {flex: 1;padding: 10px;text-align: center;
}.right {flex: 2;padding: 10px;box-sizing: border-box;
}
.title {font-size: 16px;font-weight: bold;color: #333;margin-bottom: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}
.price {font-size: 18px;color: #e4393c; /* 常见红色系表示优惠价 */margin-top: 5px;
}
.btns {margin-top: 15px;
}.btns button {display: inline-block;padding: 5px 10px;margin-right: 5px;font-size: 14px;cursor: pointer;border: none;border-radius: 3px;
}/* 不同类型的按钮样式 */
.btns .remove-btn {background-color: #ff4d4f;color: white;
}.btns .add-to-cart {background-color: #1abc9c;color: white;
}

效果:

4.点击修改数量并同步前后端【重点】

4.1.要求和思路

点击"+“和”-",实现数量的增减,要求不仅是vuex中的数据发生改变.后台json文件中也会同步修改
思路:

• 按钮绑定点击事件,并传参,点击事件中会调用actions中的方法

• actions中的方法主要做两件事:

  • 提交,触发mutations方法以更新vuex状态;
  • 使用axios.patch向后台发送请求,局部更新count属性

• mutations中的方法根据匹配到的id,更新对应的count

4.2.代码

//CartItem.vue
//"+"和"-"按钮绑定btnClick
methods:{btnClick(num){const newCount=num+this.list.count;if(newCount<1) return;//商品数量不能少于1(商品数量为0或者删除商品的业务逻辑单独实现)count newId=this.list.id//调用actions方法:updateCountAsyncthis.$store.dispatch("cart/updateCountAsync",{newId,newCount})}
}//cart.js
mutations:{updateList(state,obj){//通过传回来的id找到对应的商品goodsconst goods=state.list.find(item==>item.id===obj.id);//更新这件商品的数量goods.count=obj.count;}
},
actions:{async updateCountAsync(context,obj){//更新后端数据const res=await axios.patch(`http://localhost:3008/cart/${obj.newId}`,{count:obj.newCount})console.log(res.data)//更新前端数据context.commit("updateList",{id:obj.newId,count:obj.newCount})}
}

效果:

• 点击按钮"+",商品数量随之增加,控制台console.log(this.item.count)同步更新
• 打开db.json文件,该商品的count属性被更新

5.使用getters完成总价和总数量数据的同步

5.1.先提供CartFooter.vue的结构和样式

如下:

<template><div class="footer-container"><!-- 中间的合计 --><div class="total-section"><span>共计xxx件商品,合计:</span><span class="price">¥xxx</span></div><!-- 右侧结算按钮 --><button class="btn btn-success btn-settle">结算</button></div>
</template><style scoped>
.footer-container {display: flex;justify-content: space-between;align-items: center;background-color: #f8f8f8;padding: 15px 20px;box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}.total-section {font-size: 16px;color: #333;
}.total-section .price{font-size: 18px;color: #e60012; /* 使用醒目的颜色突出总价 */
}.btn-success {position: relative;display: inline-block;padding: 10px 20px;font-size: 16px;color: #ffffff;background-color: #e60012; /* 醒目红色背景 */border: none;border-radius: 5px;cursor: pointer;transition: all 0.3s ease-in-out;
}.btn-success:hover {background-color: darken(#e60012, 10%); /* 悬停时加深背景色 */transform: scale(1.05); /* 增加悬停效果 */
}
</style>

5.2.提供getters

	//格式:数组.reduce((求和参数,数组属性)=>xxx,0);//从0开始累计getters:{totalNum(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)}}

5.3. 使用getters

//CartFooter.vue
//html
...<span>共计{{totalNum}}件商品,合计:</span><span class="price">¥{{totalPrice}}</span>//jsimport {mapGetters} from "vuex"...computed: {//格式:...mapGetters("子模块",['要映射的属性'])...mapGetters('cart',['totalNum','totalPrice'])
},

最终效果:

其他

1.为什么在axios在项目中要局部安装

1. 全局安装与局部安装的区别
当使用 npm install axios -g 进行全局安装时，Axios 被放置在系统的全局环境中，而不是当前项目的 node_modules 文件夹中。这意味着全局安装不会影响任何具体项目中的依赖列表，也不会更新该项目的 package.json 文件1。
因此，即使成功执行了 npm install axios -g，当前项目的 package.json 文件仍然不会有 axios 字段，这是预期行为而非错误。2. 导致模块未找到的根本原因
Vue 项目运行时，默认只会查找位于当前项目目录下的 node_modules 文件夹内的模块。如果 Axios 是通过 -g 参数全局安装的，则 Vue 构建工具（如 Webpack）无法识别该模块，从而引发 Module not found: Error: Can't resolve 'axios' 错误33. 正确的解决方案
为了使 Axios 在项目中可用，应将其作为局部依赖安装到当前项目中，而不是采用全局安装的方式。以下是具体的解决步骤：
方法一：局部安装 AXIOS 并保存到依赖项
执行以下命令将 Axios 安装为项目的局部依赖，并自动更新 package.json 文件：
npm install axios --save
此操作会在 package.json 的 dependencies 字段中添加 Axios 条目，同时下载对应的模块到 node_modules 文件夹中。对于像 Axios 这样的库，通常建议始终将其作为局部依赖安装。这样不仅可以确保不同项目间互不影响，还能更方便地管理版本冲突问题

2.Axios PATCH 方法的功能与使用

功能
axios.patch() 是一种用于向服务器发送部分修改的数据的方法。它通常用来更新资源的部分属性，而不是替换整个资源。这种行为符合 RESTful API 设计原则中的“局部更新”概念

作用于后台数据的能力
通过 axios.patch() 发送的请求会携带需要更新的具体字段及其新值,到指定 URL 上对应的资源。
服务器接收到这些数据后，会对目标资源执行相应的更新操作，并返回更新后的状态或确认消息。
这种方式相比 PUT 更高效，因为它只传输变化的内容而非完整的对象

语法

axios.patch(url[, data[, config]])

• url: (字符串) 表示要访问的目标地址。
• data: (可选, 对象或其他序列化类型) 要传递给服务器的信息体。
• config: (可选, 对象) 配置选项，比如超时时间、自定义头部等。