說到 Vue3 的狀態管理，我們會第一時間想到 Pinia、Vuex，但是經過很長一段時間的 Vue3 項目開發，我逐漸發現，我們真的有必要用 Pinia、Vuex 這類的狀態管理工具嗎？

帶著這樣的疑惑，我首先是想知道一下 Pinia、Vuex 的優點到底是什么，企圖說服自己去使用它們來做狀態管理！

圖片

優點？非他不可？

看看上面所說的優點，其實我們仔細想一下，這些優點貌似也不是那么的非他不可吧？

• 集中式狀態管理： 其實 Ref、Reactive 也可以做到，只需要寫在某個 .js/.ts 文件里即可
• 模塊化： 其實 Ref、Reactive 也可以做到，不同模塊的狀態寫到不同的 .js/.ts 文件里即可
• 類型推導： 這個是 TypeScript 層面的事情，與狀態管理工具無關
• 響應式和懶加載： Ref、Reactive 也可以做到，本身就是響應式，并且引用到 .js/.ts 才會去初始化
• 持久化和插件擴展： 實現起來不難，并不是什么技術難點

綜上所述，貌似在 Vue3 項目中可以使用 Ref、Reactive 去做狀態管理就行了？

其實還是優點的

其實 Pinia、Vuex 這類狀態管理工具還是有一個很大的優點的，那就是邏輯更加緊湊，可維護性 更高，不過我知道我這個看法是比較主觀的看法。

我還是推薦一些比較小的項目，可以使用 Ref、Reactive 去進行狀態管理，但是如果是大型項目的話，確實還是需要 Pinia、Vuex 這類狀態管理工具。

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 也能達到組件之間共享狀態~

圖片