vuex实现简单的购物车功能
作者:UIEngineer 发布时间:2024-05-08 10:42:20
标签:vuex,购物车
本文实例为大家分享了vuex实现购物车功能的具体代码,供大家参考,具体内容如下
文件目录如下:
购物车组件
<template>
<div>
<h1>vuex-shopCart</h1>
<div class="shop-listbox">
<shop-list />
</div>
<h2>已选商品</h2>
<div class="shop-cartbox">
<shop-cart />
</div>
</div>
</template>
<script>
import shoList from './shop-list'
import shopCart from './shop-cart'
export default {
name: 'shop',
components: {
'shop-list' : shoList,
'shop-cart' : shopCart
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
商品列表
<template>
<div class="shop-list">
<table>
<tr class="shop-listtitle">
<td>id</td>
<td>名称</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr v-for = "item in shopList" class="shop-listinfo" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>
<button @click="addToCart(item)">加入购物车</button>
</td>
</tr>
</table>
</div>
</template>
<script>
import {mapGetters,mapActions} from "vuex";
export default {
name : 'shopList',
computed: {
...mapGetters({
shopList:'getShopList',
})
},
methods: {
...mapActions(['addToCart'])
},
}
</script>
选中商品列表
<template>
<div class="shop-list">
<table>
<tr class="shop-listtitle">
<td>id</td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>操作</td>
</tr>
<tr v-for="item in cartData" class="shop-listinfo" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.num}}</td>
<td><button class="shop-dele dele-btn" @click="deleteShop(item)">删除</button></td>
</tr>
<tr v-if="cartData.length <= 0">
<td colspan="5">暂无数据</td>
</tr>
<tr>
<td colspan="2">总数:{{totalNum}}</td>
<td colspan="2">总价格:{{totalPrice}}</td>
<td><button class="dele-cart dele-btn" @click="clearCart">清空购物车</button></td>
</tr>
</table>
</div>
</template>
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
name : 'shopCart',
data(){
return{
}
},
computed: {
...mapGetters({
cartData:'addShopList',
totalNum : 'totalNum',
totalPrice:'totalPrice'
})
},
methods: {
...mapActions({
clearCart:'clearToCart',
deleteShop:"deletToShop"
})
}
}
</script>
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
}
来源:https://blog.csdn.net/zjsfdx/article/details/88109624


猜你喜欢
- 本人最近在当当网上购买了一本关于用户体验的书,在此把最实在的内容整理下发给大家分享下。第一步:表现层视觉设计,也就是我们说的网页设计师做的工
- 在开始做mysql分页功能组件前,便设定的是要有一定可复用性。先在项目里Views文件夹下右键新建名为_PaginationComponen
- 因为云服务器的centos是没有图形界面的,所以安装比较麻烦,刚好19c有本地rpm的安装方法,所以推荐用rpm安装。首先到官网下载rpm包
- 本文实例讲述了mysql show操作。分享给大家供大家参考,具体如下:SHOW CHARACTER SET显示所有可用的字符集SHOW C
- $("input").attr("checked","checked") 设置以
- 我就废话不多说了,大家还是直接看代码吧~'''Created on 2018-4-16'''
- Python操作MySQL主要使用两种方式:原生模块 pymsqlORM框架 SQLAchemypymqlpymsql是Python中操作M
- 本文实例讲述了Python实现的各种常见分布算法。分享给大家供大家参考,具体如下:#-*- encoding:utf-8 -*-import
- 本文实例讲述了python对数组进行反转的方法。分享给大家供大家参考。具体实现方法如下:arr = [1,2,3]arr.reverse()
- 本文实例讲述了Python装饰器(decorator)定义与用法。分享给大家供大家参考,具体如下:什么是装饰器(decorator)简单来说
- 首先介绍一下import和include的区别或者说import相对include的好处:import导入的内容只会被包含一次,在引入之前会
- 先给大家介绍下python中format函数,在文章下面给大家介绍python.format()函数的简单使用---恢复内容开始---pyt
- 一、导入re库python使用正则表达式要导入re库。import re在re库中。正则表达式通常被用来检索查找、替换那些符合某个模式(规则
- 1、numpy.array() 可以把列表转换为矩阵numpy.array(object, dtype=None, *,
- 在写登录功能的时候看着网上的视频学着做,然后看了源码的时候发现了一些有意思的功能,因此写这一篇笔记分享给大家.1.阅读Django自带用户系
- 不同数据库之间若不能导入导出,那么将是一件可怕的事情,所幸的是一般情况下通过不同的方法和途径,都可以实现,方法有多种,本人提供其中的一个,提
- 本文实例讲述了python集合的创建、添加及删除操作。分享给大家供大家参考,具体如下:集合时无序可变的序列,集合中的元素放在{}内,集合中的
- 如下所示:interval=stats.t.interval(a,b,mean,std)t分布的置信区 间a:置信水平b:检验量的自由度me
- 使用Python实现了一下我们同事的C++高斯投影正反算,实际跑通,可用。#!/ usr/bin/python# -*- coding:ut
- 1、页签的表达。页签表达很清晰,当前页签突出,且层级包涵关系明确;看下图,一目了然的感觉,不用疑惑我在那部分里。不信?拿当当的对比一下,你感