vuex怎么实现简单的购物车功能
发表于:2024-10-27 作者:千家信息网编辑
千家信息网最后更新 2024年10月27日,这篇"vuex怎么实现简单的购物车功能"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"
千家信息网最后更新 2024年10月27日vuex怎么实现简单的购物车功能
这篇"vuex怎么实现简单的购物车功能"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"vuex怎么实现简单的购物车功能"文章吧。
文件目录如下:
购物车组件
vuex-shopCart
已选商品
商品列表
id 名称 价格 操作 {{item.id}} {{item.name}} {{item.price}}
选中商品列表
id 名称 价格 数量 操作 {{item.id}} {{item.name}} {{item.price}} {{item.num}} 暂无数据 总数:{{totalNum}} 总价格:{{totalPrice}}
vuex 创建
npm install vuex --save,创建vuex文件夹,在文件夹中创建store.js,引入vuex;
store.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,里面创建创建当个store模块,然后默认输出,在store.js中引入;
cart.js
const state = { shop_list: [{ id: 11, name: "鱼香肉丝", price : 12 }, { id: 22, name: "宫保鸡丁", price : 14 }, { id: 34, name: "土豆丝", price : 10 }, { id: 47, name: "米饭", price : 2 }, { id: 49, name: "蚂蚁上数", price : 13 }, { id: 50, name: "腊肉炒蒜薹", price : 15 }], add : []}const getters = { // 获取商品列表 getShopList: state => state.shop_list, // 获取购物车列表 addShopList: state => { // map()方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值 return state.add.map(({ id, num }) => { let product = state.shop_list.find(n => n.id == id)// find()方法返回通过测试(函数内判断)的数组的第一个元素的值,如果没有符合条件的元素返回undefined if (product) {// 如果存在该商品 return {// 返回对象 ...product, num } } }) }, // 获取总数量 totalNum: (state, getters) => { let total = 0 getters.addShopList.map(n => { total += n.num }) return total }, // 计算总价格 totalPrice: (state, getters) => { let total = 0 getters.addShopList.map(n => { total += n.num * n.price }) return total }},const actions = { // 加入购物车 addToCart({ commit},product) { commit("addCart", { id : product.id }) }, // 清空购物车 clearToCart({ commit}) { commit("clearCart") }, // 删除单个物品 deletToShop({ commit},product) { commit("deletShop",product) }}const mutations = { // 加入购物车 addCart(state, { id}){ let record = state.add.find(n => n.id == id) if (!record) {// 如果购物车中不存在该商品 state.add.push({// 追加商品 id, num : 1 }) } else { // 如果商品已经加入购物车,则改变数量 record.num++ } }, // 删除单个物品 deletShop(state, product) { state.add.forEach((item,i) => { if (item.id == product.id) {// 如果找到该商品 state.add.splice(i,1) } }) }, // 清空购物车 clearCart(state) { state.add = [] }}export default { state, getters, actions, mutations}
以上就是关于"vuex怎么实现简单的购物车功能"这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注行业资讯频道。
购物车
购物
商品
内容
价格
元素
数组
文件
功能
数量
文件夹
函数
单个
名称
文章
方法
模块
物品
知识
篇文章
数据库的安全要保护哪些东西
数据库安全各自的含义是什么
生产安全数据库录入
数据库的安全性及管理
数据库安全策略包含哪些
海淀数据库安全审计系统
建立农村房屋安全信息数据库
易用的数据库客户端支持安全管理
连接数据库失败ssl安全错误
数据库的锁怎样保障安全
网络安全主题教育题材
一梦江湖快意如初服务器没找到
我的互联网科技时代顶点
服务器角色管理员
数据库基础01
北京智能软件开发管理模式
如何用虚拟机模拟云服务器
ajax 修改数据库
2005分离附加数据库
数据库写代码
服务器处于关闭维护状态什么意思
服务器机房空调批发
网络安全产业链相关个股全面梳理
建立安全生产数据库
聊城微信公众号软件开发哪家好
职业中专网络技术
深圳公安网络安全平台
晋中跑腿app软件开发
网络安全的保护方法
网络安全发的案例
堡垒 数据库
抖音服务器有多大图片
手机怎么连接日本服务器
四川互联网科技有限公司
电子支付与网络安全试卷
商品批量上传软件开发
万方数据库包含哪些内容
惠普服务器风扇diy
高科技互联网加盟
db2数据库降高水位