前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心~

我建了 5000人前端學(xué)習(xí)群，群內(nèi)分享前端知識(shí)/Vue/React/Nodejs/全棧，關(guān)注我，回復(fù)加群，即可加入~

是否真的需要使用 Pinia？

最近我一直在思考一個(gè)問(wèn)題：在 Vue3 項(xiàng)目中進(jìn)行狀態(tài)管理時(shí)，我們是否真的需要使用 Pinia？

不如反過(guò)來(lái)問(wèn)一個(gè)問(wèn)題：如果沒(méi)有 Pinia，我們還能實(shí)現(xiàn)狀態(tài)管理嗎？

答案是：可以的！

使用 ref 和 reactive

Vue3 提供的一些 API 比如ref和reactive，與 React 的做法不同，它們并不一定需要在組件中聲明。

舉個(gè)例子，假如你需要管理局部狀態(tài)，可以直接使用這些 API 來(lái)完成，而不需要額外引入外部庫(kù)。

圖片

圖片

圖片

通過(guò)這種方式，我們能夠?qū)崿F(xiàn)局部狀態(tài)的管理，并且實(shí)現(xiàn)多個(gè)組件共享同一個(gè)狀態(tài)。具體效果可以參考以下示意圖。

圖片

effectScope API

Vue3 還有一個(gè)非常少為人知的 API —— effectScope，它其實(shí)非常強(qiáng)大，但很多開發(fā)者并不了解。

而 Pinia 底層的原理正是依賴于 effectScope 來(lái)實(shí)現(xiàn)狀態(tài)管理。

圖片

既然 Pinia 本質(zhì)上就是利用 effectScope，我們同樣可以直接使用這個(gè) API 來(lái)進(jìn)行狀態(tài)管理。

其實(shí)，已經(jīng)有一些開源庫(kù)（例如 vueuse）嘗試過(guò)這種方式。

圖片

通過(guò)使用這個(gè) Hooks，我們可以實(shí)現(xiàn)狀態(tài)管理，而且使用 effectScope時(shí)，狀態(tài)的管理不需要再寫在外部，因?yàn)?/span>effectScope的內(nèi)部邏輯只會(huì)執(zhí)行一次，無(wú)論你調(diào)用多少次。

圖片

圖片

圖片

通過(guò)effectScope，同樣可以實(shí)現(xiàn)多個(gè)組件共享狀態(tài)的功能。

圖片

盡管如此，Pinia 還是有它獨(dú)特的優(yōu)勢(shì)。它能幫助我們減少代碼量，使得代碼結(jié)構(gòu)更清晰、易于維護(hù)。

例如，Pinia 的設(shè)計(jì)讓狀態(tài)、計(jì)算屬性和方法更加分明：

• state: 定義狀態(tài)。
• getter: 定義計(jì)算屬性。
• action: 定義修改狀態(tài)的方法。

這種結(jié)構(gòu)能夠讓我們的代碼更加模塊化和易于理解。

圖片

監(jiān)聽(tīng)狀態(tài)變化

Pinia 還提供了$subscribe方法，可以幫助我們監(jiān)聽(tīng)整個(gè)狀態(tài)的變化。我們也可以使用這個(gè)方法來(lái)進(jìn)行持久化存儲(chǔ)，實(shí)現(xiàn)狀態(tài)的保存和恢復(fù)。

圖片

插件機(jī)制

Pinia 提供了插件機(jī)制，允許我們拓展其功能，以下是一些可以擴(kuò)展的方面：

• 為 store 添加新的屬性。
• 在定義 store 時(shí)增加自定義選項(xiàng)。
• 為 store 添加額外的方法。
• 包裝已有方法。
• 修改或取消某些 action。
• 實(shí)現(xiàn)副作用操作（如本地存儲(chǔ)）。

例如，我們可以為所有的狀態(tài)管理增加一個(gè)統(tǒng)一的屬性變量。

圖片

此外，Pinia 的持久化插件pinia-plugin-persistedstate就是利用了插件機(jī)制。它通過(guò)$subscribe來(lái)監(jiān)聽(tīng)每個(gè)狀態(tài)的變化，并將狀態(tài)數(shù)據(jù)持久化到存儲(chǔ)中。

圖片

圖片

這使得 Pinia 在處理狀態(tài)持久化時(shí)非常簡(jiǎn)便且高效。