前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心~

我建了 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 在處理狀態持久化時非常簡便且高效。