說到 Vue3 的狀態(tài)管理，我們會第一時間想到 Pinia、Vuex，但是經(jīng)過很長一段時間的 Vue3 項目開發(fā)，我逐漸發(fā)現(xiàn)，我們真的有必要用 Pinia、Vuex 這類的狀態(tài)管理工具嗎？

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

圖片

優(yōu)點？非他不可？

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

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

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

其實還是優(yōu)點的

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

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

Ref、Reactive

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

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

圖片

圖片

圖片

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

圖片

effectScope

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

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

圖片

既然 Pinia 是通過effectScope來實現(xiàn)的，那么，我們自然也可以直接使用這個 API 來做狀態(tài)管理。

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

圖片

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

圖片

圖片

圖片

圖片

利用 effectScope 也能達到組件之間共享狀態(tài)~

圖片