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

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

圖片

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

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

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

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

其實(shí)還是優(yōu)點(diǎn)的

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

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

Ref、Reactive

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

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

圖片

圖片

圖片

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

圖片

effectScope

Vue3 有一個(gè)超級(jí)冷門的 API 叫 effectScope ，這個(gè) API 非常強(qiáng)大，但是很多人都不知道它。

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

圖片

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

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

圖片

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

圖片

圖片

圖片

圖片

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

圖片