vuex实现简单的购物车功能
作者：UIEngineer
这篇文章主要为大家详细介绍了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
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。