用vuex数据共享实现购物车功能

先在数据库中创建一个MySQL表

CREATE TABLE fruit (
  id INT AUTO_INCREMENT PRIMARY KEY,
  NAME VARCHAR(50),
  price DECIMAL(8,2)
);

INSERT INTO fruit (NAME, price) VALUES ('苹果', 15.00), ('香蕉', 10.00), ('橘子', 12.00);

用Springboot查询这个数据表并返回数据

@RestController
public class fruitController {
    @Autowired
    private FruitRepository fruitRepository;
    
    @GetMapping("/fruit")
    public List<Fruit> findAll() {
        return fruitRepository.findAll();
    }
}

App.vue根组件

<template>
  <div class="zhuye">
	  <div class="left">
		  <ShopList></ShopList>
	  </div>
	 <div class="right">
		 <ShopCar></ShopCar>
	 </div>
	 
  </div>  
</template>

<script>
import ShopList from './components/ShopList.vue'
import ShopCar from './components/ShopCar.vue'
export default {
  name: 'App',
  components: {
    ShopList,
	ShopCar
  },
  mounted() {
  	
  }
}
</script>

<style type="text/css" scoped="scoped">
	.zhuye{
		display: flex;
	}
	.left{
		flex: 1;
	}
	.right{
		flex: 1;
	}
</style>

商品列表 ShopList.vue

<template>
  <div class="ShopList">
	  
		<h4>商品列表</h4>
		
		<div v-for="(item,index) in dataList">
			<Shop :key="index" :name="item.name" :price="item.price" :id="item.id" :isLoading="item.isLoading"></Shop>
		</div>
	
  </div>
</template>

<script>
import axios from 'axios'
import Shop from './Shop.vue'
import store from '../store.js'
export default {
name: 'ShopList',
components:{
	 Shop
 },
 data() {
 	return{
		dataList:[]
	}
 },
 mounted() {
	var vm = this;
	axios.get("http://localhost:8080/fruit")
	  .then(response => {
	    // console.log(response.data)
		var a = [];
		a = response.data;
		for(var i=0;i<a.length;i++){
			a[i].isLoading=false
			a[i].num = 1
		}
		vm.$store.commit('setDataList', a);
		vm.$store.commit('setShopList', a);
		vm.dataList = a;
	  })
	  .catch(error => {
	    console.log('请求失败')
	  });
 }
}
</script>


<style type="text/css">
	
	.ShopList{
		margin:0;
		padding: 0;
		width: 300px;
		height: 400px;
		border: 1px solid red;
		text-align: center;
	}
</style>

商品shop.vue

<template>
	<div class="shop">
		<div class="name">{{name}}</div>
		<div class="price">¥:{{price}}</div>
		<div class="add">
			<button type="button" @click="add(id)" :disabled="isLoading">添加到购物车</button>
		</div>
	</div>
</template>

<script>

	export default{
		props:['name','price','id','isLoading'],
		data() {
			return{
				
			}
		},
		methods:{
			add(id){
				console.log(id)
				this.$store.commit("addShopCart",id);
				this.$store.commit("setIsLoadingTrue",id);
				console.log(this.$store.state.shopList)
			}
		},
		
	}
</script>

<style scoped="scoped">
	.shop{
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
	.name{
		flex: 1;
	}
	.price{
		flex: 1;
	}
	.add{
		flex: 2;
	}
</style>

购物车：ShopCar

<template>
	<div class="shopcar">
		 <h4>购物车列表</h4>
		 
		 <div v-for="(item,index) in shopcarlist" :key="item.id">
		 	<ShopCarList :name="item.name" :price="item.price" :id="item.id" :num="item.num"></ShopCarList>
		 </div>
		 
		 <div class="pirce">总价:{{ total_price }}</div>
	</div>
</template>

<script>
	import ShopCarList from './ShopCarList.vue'
	export default{
		name:'ShopCar',
		components:{
			ShopCarList
		},
		computed: {
		  shopcarlist() {
		    return this.$store.state.shopCart;
		  },
		  total_price() {
		        return this.$store.state.total_price
		      }
		}
	}
	
</script>

<style type="text/css" scoped="scoped">
	.shopcar{
		margin:0;
		padding: 0;
		width: 300px;
		height: 400px;
		border: 1px solid red;
		text-align: center;
		position: relative;
	}
	.pirce{
		position: absolute;
		bottom: 20px;
		left: 20px;
		
	}
</style>

购物车列表：ShopCarList

<template>
  <div class="shop">
    <div class="name">
		{{ name }} 数量：{{num}}
	</div>
	<div class="btn">
		<div @click="addone(id)" style="cursor: pointer;">
			+
		</div>
		<div @click="delone(id)" style="cursor: pointer;">
			-
		</div>
	</div>
    <div class="price">¥:{{ price }}</div>
    <div class="del">
      <button type="button" @click="del(id)">删除</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['name','price', 'id'],
  
  data() {
  	return{
		num:1
	}
  },
  methods: {
    del(id) {
      console.log(id);
      this.$store.commit('delShopCart', id);
	  this.$store.commit('setIsLoadingFalse', id);
    },
	addone(id){
		console.log(id);
		this.num++;
		this.$store.commit('addone', id);
	},
	delone(id){
		if(this.num<2){
			return
		}
		this.num--;
		this.$store.commit('delone', id);
	}
  }
};
</script>

<style scoped="scoped">
	.shop{
		width: 100%;
		align-items: center;
		justify-content: center;
		display: flex;
	}
	.name{
		flex: 2;
	}
	.price{
		flex: 1;
	}
	.btn{
		flex: 1;
	}
	.del{
		flex: 1;
	}
	
</style>

vuex store.js

import { createStore } from 'vuex'

const store = createStore({
  state () {
    return {
	  //数据列表
      dataList:[],
	  //过滤后的数据列表
	  shopList:[],
	  //购物车列表
	  shopCart:[],
	  total_price:0
    }
  },
  mutations: {
    setDataList(state, data) {
        state.dataList = data;
    },
    setShopList(state, data) {
	  state.shopList = data;
	},
	addShopCart(state, id){
		state.shopCart.push(state.dataList[id-1])
	},
	delShopCart(state, id){
		state.shopCart = state.shopCart.filter(obj => obj.id !== id);
	},
	setIsLoadingTrue(state, id) {   // 定义一个名为 setIsLoading 的 mutation
	    const index = state.shopList.findIndex(item => item.id === id);   // 查找商品在 shopList 数组中的索引
	    state.shopList[index].isLoading=true;   // 修改商品的 isLoading 属性
		state.total_price += state.shopList[index].price
	},
	setIsLoadingFalse(state, id) {   // 定义一个名为 setIsLoading 的 mutation
	    const index = state.shopList.findIndex(item => item.id === id);   // 查找商品在 shopList 数组中的索引
	    state.shopList[index].isLoading=false;
		state.total_price -= state.shopList[index].price
	},
	addone(state, id){
		const index = state.shopList.findIndex(item => item.id === id);   // 查找商品在 shopList 数组中的索引
		state.shopList[index].price += state.shopList[index].price/state.shopList[index].num
		state.shopList[index].num++;
		state.total_price += state.shopList[index].price/state.shopList[index].num
	},
	delone(state, id){
		const index = state.shopList.findIndex(item => item.id === id);   // 查找商品在 shopList 数组中的索引
		state.shopList[index].price -= state.shopList[index].price/state.shopList[index].num
		state.shopList[index].num--;
		state.total_price -= state.shopList[index].price/state.shopList[index].num
	}
  },
  actions: {
    
  },
  getters: {
    
  }
})

export default store