真的需要 Pinia 嗎？

最近在想一個問題：在 Vue3 項目中，進行狀態管理的時候，我們真的需要 Pinia 嗎？

其實我們可以反過來想一個問題：沒有 Pinia，我們能做狀態管理嗎？

答案是：可以?。。?/p>

ref、reactive

Vue3 的一些 API 對比 React 的好處就是，這些 API 并不一定需要在組件中去聲明。

就比如你想要做局部狀態管理的時候，可以直接使用 reactive、ref 這類 API 來完成。

圖片

圖片

圖片

這樣能達到局部狀態管理，多組件共用同一個狀態的效果，請看下圖：

圖片

effectScope

Vue3 有一個超級冷門的 API 叫 effectScope ，這個 API 非常強大，但是很多人都不知道它。

當然，既然很少人知道它，那自然就很少人知道，Pinia 的底層原理就是依賴了 effectScope。

圖片

既然 Pinia 是通過effectScope來實現的，那么，我們自然也可以直接使用這個 API 來做狀態管理！

其實已經有人做過這件事了，就比如 vueuse 中的。

圖片

我們可以直接用這個 Hooks 來進行狀態管理，如果是使用 effectScope 來進行管理的話，狀態就不需要寫在 Hooks 外部了，因為 effectScope 內部邏輯只會執行一次，無論你調用多少次。

圖片

圖片

圖片

利用 effectScope 也能達到組件之間共享狀態！

圖片

那還需要 Pinia 嗎？

結構分明

我覺得 Pinia 還是有他的好處的，好處就是：讓我們少寫一些代碼，并且代碼更加分明。

比如下面這個例子：

• state： 定義狀態
• getter： 定義計算變量
• action： 定義修改方法

結構很分明：

圖片

監聽 state

Pinia 還提供了 $subscribe 來監聽整個狀態，我們也可以利用這個方法來做持久化存儲。

插件機制

Pinia 提供了插件機制，可以讓你去拓展 Pinia 的功能，以下是你可以擴展的內容：

• 為 store 添加新的屬性
• 定義 store 時增加新的選項
• 為 store 增加新的方法
• 包裝現有的方法
• 改變甚至取消 action
• 實現副作用，如本地存儲
• 僅應用插件于特定 store

比如舉個小例子，給所有狀態管理都加一個屬性變量。

Pinia 著名的持久化插件pinia-plugin-persistedstate就是利用了 Pinia 的插件機制。

他的核心代碼其實很少，就是利用插件機制，使用$subscribe去監聽每一個狀態管理的變化，然后進行持久化存儲！

圖片