眾多大廠 Vue3 項目放棄使用 Pinia，新趨勢？
前言
大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~
我建了 5000人前端學習群，群內分享前端知識/Vue/React/Nodejs/全棧，關注我，回復加群，即可加入~
是否真的需要使用 Pinia？
最近我一直在思考一個問題：在 Vue3 項目中進行狀態管理時，我們是否真的需要使用 Pinia？
不如反過來問一個問題：如果沒有 Pinia，我們還能實現狀態管理嗎？
答案是：可以的！
使用 ref 和 reactive
Vue3 提供的一些 API 比如ref和reactive，與 React 的做法不同，它們并不一定需要在組件中聲明。
舉個例子，假如你需要管理局部狀態，可以直接使用這些 API 來完成，而不需要額外引入外部庫。
圖片
圖片
圖片
通過這種方式，我們能夠實現局部狀態的管理，并且實現多個組件共享同一個狀態。具體效果可以參考以下示意圖。
圖片
effectScope API
Vue3 還有一個非常少為人知的 API —— effectScope，它其實非常強大，但很多開發者并不了解。
而 Pinia 底層的原理正是依賴于 effectScope 來實現狀態管理。
圖片
既然 Pinia 本質上就是利用 effectScope，我們同樣可以直接使用這個 API 來進行狀態管理。
其實，已經有一些開源庫（例如 vueuse）嘗試過這種方式。
圖片
通過使用這個 Hooks，我們可以實現狀態管理，而且使用 effectScope時，狀態的管理不需要再寫在外部，因為effectScope的內部邏輯只會執行一次，無論你調用多少次。
圖片
圖片
圖片
通過effectScope，同樣可以實現多個組件共享狀態的功能。
圖片
盡管如此，Pinia 還是有它獨特的優勢。它能幫助我們減少代碼量，使得代碼結構更清晰、易于維護。
例如，Pinia 的設計讓狀態、計算屬性和方法更加分明：
- state: 定義狀態。
- getter: 定義計算屬性。
- action: 定義修改狀態的方法。
這種結構能夠讓我們的代碼更加模塊化和易于理解。
圖片
監聽狀態變化
Pinia 還提供了$subscribe方法，可以幫助我們監聽整個狀態的變化。我們也可以使用這個方法來進行持久化存儲，實現狀態的保存和恢復。
圖片
插件機制
Pinia 提供了插件機制，允許我們拓展其功能，以下是一些可以擴展的方面：
- 為 store 添加新的屬性。
- 在定義 store 時增加自定義選項。
- 為 store 添加額外的方法。
- 包裝已有方法。
- 修改或取消某些 action。
- 實現副作用操作（如本地存儲）。
例如，我們可以為所有的狀態管理增加一個統一的屬性變量。
圖片
此外，Pinia 的持久化插件pinia-plugin-persistedstate就是利用了插件機制。它通過$subscribe來監聽每個狀態的變化，并將狀態數據持久化到存儲中。
圖片
圖片
這使得 Pinia 在處理狀態持久化時非常簡便且高效。
