Auto commit

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "axios": "^1.4.0",
     "guess": "^1.0.2",
+    "mitt": "^3.0.0",
     "vue": "^3.2.47"
   },
   "devDependencies": {

src/App.vue

@@ -9,7 +9,7 @@
     <Goods v-for="item in list" :key="item.id" :title="item.goods_name" :pic="item.goods_img" :chstate="item.goods_state"
       :id="item.id" :price="item.goods_price" :count="item.goods_count" @good_check_change="updateGoodState"></Goods>
 
-    <Footer :full_checked="allChecked" :amount="amt" @changAllGoodsState="changeState" ref="FooterRef"></Footer>
+    <Footer :full_checked="allChecked" :amount="amt" :counts="allCount" @changAllGoodsState="changeState" ></Footer>
     
   </div>
 </template>
@@ -19,6 +19,7 @@ import axios from 'axios' // 导入 axios 模块
 import Header from '@/components/Header/Header.vue' // 导入 Header 组件
 import Goods from '@/components/Goods/Goods.vue' // 导入 Goods 组件
 import Footer from '@/components/Footer/Footer.vue'
+import bus from '@/components/eventBus'
 
 
 export default {
@@ -76,14 +77,24 @@ export default {
 
     amt(){
       return this.list.filter(item=>item.goods_state).reduce((t,item)=>t+=item.goods_price * item.goods_count,0)
+    },
+    allCount(){
+      return this.list.filter(item=>item.goods_state).reduce((t,item)=>t+=item.goods_count,0)
     }
   },
   created() {
     // 在实例创建之后请求数据
     this.initBuyCars()
+    bus.on('share',val=>{
+      this.list.some(item=>{
+        if(item.id===val.id){
+          item.goods_count = val.value
+          return true
+        }
+      })
+    })
 
-
-    // helloWorld(); // 执行该方法
+   
   }
 }
 </script>

src/components/Counter/Counter.vue

 <template>
   <div class="number-container d-flex justify-content-center align-items-center">
     <!-- 减 1 的按钮 -->
-    <button type="button" class="btn btn-light btn-sm">-</button>
+    <button type="button" class="btn btn-light btn-sm" @click="sub">-</button>
     <!-- 购买的数量 -->
     <span class="number-box">{{num}}</span>
     <!-- 加 1 的按钮 -->
@@ -28,7 +28,11 @@ export default {
   },
   methods:{
     add(){
-      
+      bus.emit('share',{id:this.count_id,value:this.num + 1})
+    },
+    sub(){
+      if (this.num ===1) return
+      bus.emit('share',{id:this.count_id,value:this.num - 1})
     }
   },
 }

src/components/Footer/Footer.vue

@@ -13,7 +13,7 @@
     </div>
 
     <!-- 结算按钮 -->
-    <button type="button" class="btn btn-primary btn-settle">结算（{{ 0 }}）</button>
+    <button type="button" class="btn btn-primary btn-settle">结算（{{ counts}}）</button>
   </div>
 </template>
 
@@ -28,6 +28,10 @@ export default {
     amount:{
       type:Number,
       default:0
+    },
+    counts:{
+      type:Number,
+      default:0
     }
   },
   methods:{

src/components/eventBus.js

-
+// eventBus.js
+/* 
 import { createApp } from 'vue';
 
-export default createApp({});
+const eventBus = createApp({});
+export default eventBus; */
+
+// EventBus.js
+import mitt from 'mitt';
+
+const eventBus = mitt();
 
+export default eventBus;