什麼是Vuex？

當我們的應用越來越複雜，並且多個組件需要共享相同的狀態時，這時我們需要一個集中式的狀態管理。Vuex 就是為此而生，它為我們提供了一個集中管理狀態的方式，並且帶有規範化的模式。

上面是官方說法，簡單來說如果你是小應用，你的數據都是封裝在單個組件裡面，可是今天隨著專案越來越大，很多數據要組件之間傳遞，那就需要Vuex了，Vuex就類似全部組件的資料傳遞中間站，這樣一來組件只需要專心處理傳遞進來的功能即可，傳遞站寫好傳遞功能即可。

Vuex核心觀念

State（狀態）

• 定義：State 是 Vuex store 中的數據源，存儲整個應用的狀態或數據。
• 用法：我們可以利用 Vuex 的 state 來在組件間共享數據。
• 注意：為了避免數據混亂，我們應該避免直接修改 state，而應使用 mutations。

Getters(取得者)

• 定義：Getters 可以看作是 Vuex 中的計算屬性。它基於 state 產生某些計算結果。
• 用法：當我們想從 state 派生出某些狀態（例如過濾列表、計算屬性等）時，可以使用 getters。

Mutations（突變）

• 定義：Mutations 是用來直接修改 state 的函數。每個 mutation 都有一個名稱和一個回調函數，回調函數是當 mutation 被觸發時執行的。
• 用法：當需要改變 state 時，我們會 commit 一個 mutation，而不是直接改變 state。
• 注意：mutations 必須是同步函數。

Actions（動作）

• 定義：Actions 跟 mutations 很相似，但它提交的是 mutation，而不是直接改變 state，且 actions 可以包含異步操作。
• 用法：當有異步操作（例如 API 請求）時，我們可以使用 actions，當操作完成後再 commit mutation。

Modules（模組）

• 定義：隨著應用的增長，store 可能會變得很大。Modules 可以讓我們將 store 分解為模組，每個模組都有自己的 state、mutations、actions、getters 等。
• 用法：當我們的應用變得非常大，且有許多狀態需要管理時，我們可以使用 modules 來組織和模組化我們的 store。

實際操作

這邊以簡易的toDOList為例子，不過加入vuex的概念

APP.vue

在這段代碼中，我們首先從 Vue 和 Vuex 導入了所需的函數。其中 computed 用於創建當依賴的數據改變時會自動重新計算的計算屬性，而 ref 用於創建 Vue 3 的響應式數據。而 useStore 函數則用於取得 Vuex store 的實例。
初始化部分，我們使用 ref 函數創建了名為 newTask 的響應式數據，其初始值為空字符串，用於保存用戶輸入的新任務。
在 addTask 函數中，當被調用時，它首先通過 store.dispatch 方法觸發名為 'addTask' 的 action，並將 newTask.value 作為參數傳遞。這個 action 在 Vuex store 中負責處理相關的邏輯，例如添加新任務到任務列表中。執行完添加操作後，addTask 函數將清空 newTask 的值，確保輸入框在添加任務後得到清空。
最後，除了 newTask 和 addTask 之外，代碼還返回了兩個計算屬性，tasks 和 tasksCount。tasks 計算屬性返回 Vuex store 中的 tasks 狀態，而 tasksCount 則返回 store 中的 tasksCount getter 的值。兩者都將實時反映 Vuex store 中的相應數據變化。

main.js

這個就一般實例化，到11天還不會就無言了

store.js

這段代碼是用來建立一個「存儲庫」的。你可以把它想像成一個電商的倉庫，裡面存放了所有的貨物（在這裡是任務）。

• state: 這就像倉庫的貨架，現在我們有一個空的貨架叫做 tasks，用來存放所有的任務。
• getters: 這是倉庫的統計員，他幫你數一數貨架上有多少貨物。在這裡，tasksCount 會告訴你 tasks 貨架上有多少任務。
• mutations: 這像是倉庫工人的操作指南。例如，addTask 操作就告訴工人如何將一個新的任務放到 tasks 貨架上。
• actions: 這是倉庫的管理者。當你告訴他你想增加一個新任務時，他不直接放，而是告訴工人按照上面的指南去操作。所以，addTask 在這裡就是告訴工人使用 addTask 操作來放入新的任務。
  所以，簡單來說，這是一個關於如何管理和存儲任務的倉庫指南！

總結

今天，我們學習了Vue的狀態管理工具—Vuex。它幫助集中管理Vue應用的共享數據。透過範例代碼，我們瞭解了Vuex的核心概念，包括State、Getters、Mutations和Actions。這些元素協助我們在大型應用中有效地組織和管理數據。