综合案例:使用vuex对购物车的商品数量和价格等公共数据进行状态管理

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.js

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

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

解决方法:指定端口号:json-server index.js --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映射

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

其他

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 这样的库，通常建议始终将其作为局部依赖安装。这样不仅可以确保不同项目间互不影响，还能更方便地管理版本冲突问题