1 狀态管理
1.1 什麼是狀态管理（它是什麼）？
1.2 狀态管理的作用（它是幹什麼的）？
1.3 狀态管了解決了什麼問題？
1.4 狀态管理又帶來了什麼問題？
1.5 狀态管理庫有哪些？
1.5.1 Pinia
1.5.2 Vuex
1 狀态管理
官方文檔：
https://cn.vuejs.org/guide/scaling-up/state-management.html
Vuex：https://vuex.vuejs.org/zh/guide/
Pinia：https://pinia.web3doc.top/
1.1 什麼是狀态管理（它是什麼）？
理論上來說，每一個 Vue 元件執行個體都已經在“管理”它自己的響應式狀态了。
在開發中，我們會的應用程式需要處理各種各樣的資料，這些 資料需要儲存在我們應用程式中的某一個位置，對于這些資料的管理我們就稱之為是狀态管理。
狀态管理稱為狀态管理模式，是一種在Vue的核心架構中提供了一種将狀态與視圖分離的思想，以更好地管理應用程式的狀态和資料。
- 它是一個獨立的單元，由以下幾個部分組成：
- 狀态：驅動整個應用的資料源；
- 視圖：對狀态的一種聲明式映射；
- 互動：狀态根據使用者在視圖中的輸入而作出相應變更的可能方式。
下面是“單向資料流”這一概念的簡單圖示：
- Actions：處理行為事件，可以修改State
- State：在元件中定義的Data 或者 Setup 傳回使用的資料
- View：在子產品Template中使用的資料最終被渲染成DOM
然而，當我們有多個元件共享一個共同的狀态時，就沒有這麼簡單了：
- 多個視圖可能都依賴于同一份狀态。
- 來自不同視圖的互動也可能需要更改同一份狀态。
對于情景 1：一個可行的辦法是将共享狀态“提升”到共同的祖先元件上去，再通過 props 傳遞下來。然而在深層次的元件樹結構中這麼做的話，很快就會使得代碼變得繁瑣冗長。這會導緻另一個問題：Prop 逐級透傳問題。
對于情景 2：我們經常發現自己會直接通過模闆引用擷取父/子執行個體，或者通過觸發的事件嘗試改變和同步多個狀态的副本。但這些模式的健壯性都不甚理想，很容易就會導緻代碼難以維護。
一個更簡單直接的解決方案是抽取出元件間的共享狀态，放在一個全局單例中來管理。
這樣我們的元件樹就變成了一個大的“視圖”，而任何位置上的元件都可以通路其中的狀态或觸發動作。
1.2 狀态管理的作用（它是幹什麼的）？
Vue狀态管理是為了更好的管理應用程式中複雜的狀态控制而進行設計的。
通過狀态管理，我們可以将狀态存儲在一個中央存儲區并提供一個清晰、統一的方式來分發和更改狀态。
狀态管理負責控制元件間的資料傳遞和共享，進而更好地維護和協調整個應用程式的狀态。
1.3 狀态管了解決了什麼問題？
解決了耦合性問題（解耦），把元件與元件之間的複雜關系解耦為資料與資料的關系，元件僅作單純的資料渲染，而且由于是單一資料源，整體上非常便于維護。
未使用狀态管理（如下圖）
使用狀态管理後（如下圖）
- 由于單一資料源+資料不可變，帶來了應用狀态的快照，可以很友善的實作前進/後退以及曆史記錄管理。
- 可測試性，可以分别針對視圖和資料進行測試，而不是混淆在一起，導緻測試難度極大。
1.4 狀态管理又帶來了什麼問題？
最主要是由于解決使得單個元件複雜度的提升，但相比整體複雜度的降低以及更高的可維護性，這點代價是完全值得。
1.5 狀态管理庫有哪些？
1.5.1 Pinia
Github： https://github.com/vuejs/pinia
文檔：https://pinia.web3doc.top/
Pinia 是最新一代的 Vue 輕量級狀态管理庫。
它适用于 Vue 2.x 和 Vue 3.x。
它是 Vue 官方成員在2019年11月重新設計的一個狀态存儲庫，它允許你跨元件/頁面共享狀态，并且是響應式的，類似于 Vuex。
1.5.2 Vuex
Github： https://github.com/vuejs/vuex
文檔：https://vuex.vuejs.org/zh/guide/
Vuex 是一個專為 Vue.js 應用程式開發的狀态管理模式。
它采用集中式存儲管理應用的所有元件的狀态，并以相應的規則保證狀态以一種可預測的方式發生變化。