今天的主題，是讓程式從「零散的算式」，進化成「有邏輯的公式系統」，每次我需要顯示「完成率」或「未完成數」時，都要重新在元件裡算一次，這些邏輯分散在不同地方，看起來沒問題，但每當我重構或修改邏輯時，就得一個一個元件進去改，就像做報表時，每個人都在自己桌上偷偷算一遍，沒有人共用「公式」，於是我決定建立一個「任務統計中心」，讓所有的邏輯都能集中在一個地方計算，從今天起，不管是哪個元件要顯示統計，都只要呼叫統一的「函式公式」就可以了，這樣就能自動算出所有需要的數據，不只節省時間，也能確保整個專案的邏輯一致。
想達到這樣的目標，需要做到下列幾個步驟：
Step 1：建立工具模組：在專案裡新增一個「工具資料夾」（utils），並建立了一個專門處理任務邏輯的檔案。裡面寫了兩個重點函式，第一個負責算「完成率」，第二個負責整理出「總數、已完成、未完成、完成率」。
這兩個函式的靈魂，就是 JavaScript 的三個經典陣列方法：
a.filter：用來篩選出符合條件的任務（例如已完成的項目）
b.reduce：用來把整個任務清單歸納成統計結果
c.map：目前先保留，用來做資料轉換（之後可能會派上用場）
Step 2：接入 Vue：回到 Home.vue，把原本手動統計的那幾段程式刪掉，改成只用一行「呼叫工具函式」的寫法。
Step 3：整合進 Toolbar：為了讓統計數據能和篩選按鈕放在一起，需要在 Toolbar.vue 接收一個 summary 物件作為 props，這個物件就是剛才工具函式回傳的結果，這樣 能使其同時顯示篩選按鈕（全部 / 未完成 / 已完成），和統計數據（任務狀況一目了然），整個畫面變得更清晰，也更有結構。
Step 4：清理重複顯示：在整合過程中，我發現畫面竟然出現了「兩組統計列」，一組顯示正確的數字，另一組則全是 0%，經過追查，原來我之前留下了一個舊的元件——StatsBar.vue，它也在計算相同的數據，為了避免邏輯重複，我決定讓 Toolbar 成為唯一的統計顯示來源，StatsBar 改成「純展示元件」，如果哪天要在別的地方顯示統計，只要傳入 summary 就能共用，這一改，畫面變得乾淨俐落。
今天的最終結果長這樣：