添加商品到购物车 Vuex

商品详情/购物车页面 code

<template>
	<div class="home">购物车车
		<button @click="addGood(1)">Add Good1</button>
		<button @click="addGood(2)">Add Good1</button>
		<button @click="addGood(3)">Add Good1</button>
		<ul>
			<li v-for="(item, index) in cartList"><input type="checkbox" v-model="item.selected" />{{item}} <button @click="sub(index)" :disabled="item.count <= 1">-</button>{{item.buyNumber}}<button @click="add(index)">+</button><button @click="deleteBook(index)">删除</button> </li>
		</ul>
		<p><input type="checkbox" :checked="isSelectAll" @click="selectAllClick" /> 全选</p>
		<p>共计：{{totalPrice}}  选中 {{checkedLength}}</p>
	</div>
</template>
<script type="text/javascript">
import { mapGetters, mapActions } from 'vuex'
export default {
	name: "Cart",
	data() {
		return {}
	},
	methods: {
		...mapActions(['addToCart']), //mapActions 辅助函数,直接用 vueX 中 Action 的函数
		addGood(id) {
			const good = {
				name: "商品" + id,
				id: id,
				desc: "商品" + id + "描述",
				price: id
			}
			this.addToCart(good);
		},
		add(index) { this.$store.commit('addGoodNum', index); },
		sub(index) { this.$store.commit('subGoodNum', index); },
		deleteBook(index) { this.$store.commit('removedGood', index); },
		selectAllClick() {
			if (this.isSelectAll) { //全选
				this.cartList.forEach(item => item.selected = false);
			} else { //全不选
				this.cartList.forEach(item => item.selected = true);
			}
		}
	},
	computed: {
		...mapGetters(['cartList', 'totalPrice']), //mapGetter 辅助函数
		checkedLength(){ //得到选中的商品的数量
			return this.cartList.filter(item => item.selected).length;
		},
		isSelectAll(){
			console.log("1");
			if(this.cartList.length == 0) return false;
			return !(this.cartList.filter(item => !item.selected).length);
		}
	},
	
}

</script>
<style scoped>
.home {
	height: 100vh;
	position: relative;
}

</style>

store/index.js code

import Vue from 'vue'
import Vuex from 'vuex'

//1.安装插件
Vue.use(Vuex)

//2.创建对象
const store = new Vuex.Store({
	state: { //这里放置全局变量
		cartList: [],
	},
	mutations: {
		addGoodToCartList(state, good) {
			good.selected = true; //添加商品的时候将购物车的选择状态设置为选中
				state.cartList.push(good);
		},
		addGoodNum(state, index) { //添加商品数量
			state.cartList[index].count++;
		},
		subGoodNum(state, index) { //减少商品数量
			state.cartList[index].count--;
		},
		removedGood(state, index) { //添加商品数量
			state.cartList.splice(index, 1);
		},
	},
	actions: {
		addToCart(content, good) { //逻辑都写在 action 中，让 mutation 只执行最简单的操作 
			//查找之前数组中是否有该商品
			let oldProduct = content.state.cartList.find(item => {
				return item.id == good.id;
			})
			//如果之前有该商品，则数量加1
			if (oldProduct) {
				oldProduct.count += 1;
			} else {
				good.count = 1;
				content.commit('addGoodToCartList', good);
			}
		}
	},
	getters: {
		cartList(state) {
			//得到列表，在使用的页面 引入 import {mapGetters} from 'vuex'	 
			//...mapGetters(['cartList']) 

			return state.cartList;
		},
		totalPrice(state) {
			//总价(用 good.selected 来判断下用户是否选中了该商品)
			//map: 相当于普通的遍历，会把函数的返回值赋给新数组 
			//reduce: 对数组中的所有内容进行汇总,这里的最后的 0 是给 preValue 一个初始化的值，这里执行的是一个递归的操作
			let total = state.cartList.map(good => good.selected ? good.price * good.count : 0).reduce((preValue, goodPrice) => preValue + goodPrice, 0);
			return '¥' + total.toFixed(2);
		}
	}
});
//3.导出 store  
export default store