Vue 官方狀態(tài)管理工具 Pinia 迎來 3.0 版本更新，正式放棄對 Vue 2 的支持。2 月 11 日，Pinia 3.0 版本發(fā)布，此次更新并未引入新功能，而是移除了已棄用的 API 并升級了核心依賴項(xiàng)。

以下是更新要點(diǎn)：

• Vue 3 專屬支持： Pinia 3.0 僅兼容 Vue 3，Vue 2 用戶需繼續(xù)使用 v2 版本
• TypeScript 要求： 需安裝 TypeScript 5 或更高版本
• Devtools API 升級： Devtools API 已更新至 v7 版本
• Nuxt 模塊適配： Nuxt 模塊現(xiàn)已支持 Nuxt 3，Nuxt 2 或 Nuxt bridge 用戶需繼續(xù)使用舊版 Pinia

此次更新標(biāo)志著 Pinia 全面轉(zhuǎn)向 Vue 3 生態(tài)，開發(fā)者需根據(jù)項(xiàng)目需求選擇合適的版本。

有些朋友可能也是剛使用 Vue3 開發(fā)項(xiàng)目，所以對 Pinia 有點(diǎn)懵，接下來我?guī)Т蠹抑販匾幌?Pinia 的用法：

npm install pinia

1. 創(chuàng)建 Pinia 實(shí)例

在 Vue 3 項(xiàng)目中，首先需要?jiǎng)?chuàng)建一個(gè) Pinia 實(shí)例，并將其掛載到應(yīng)用中。通常在 store.js 或 store.ts 文件中完成這一操作，這里我先在 main.ts 中去創(chuàng)建：

通過以上代碼，Pinia 已經(jīng)成功集成到 Vue 3 項(xiàng)目中

2. 創(chuàng)建 Store

Pinia 的核心概念是 Store，它是狀態(tài)管理的核心單元。每個(gè) Store 都是一個(gè)獨(dú)立的模塊，包含狀態(tài)、計(jì)算屬性和方法。

以下是一個(gè)簡單的 Store 示例：

在上面的代碼中：

• state 用于定義狀態(tài)。
• getters 用于定義計(jì)算屬性。
• actions 用于定義修改狀態(tài)的方法

3.  在組件中使用 Store

定義好 Store 后，可以在 Vue 組件中使用它。以下是一個(gè)使用 useCounterStore 的示例：

在上面的代碼中：

• 使用 useCounterStore 獲取 Store 實(shí)例。
• 使用 storeToRefs 解構(gòu)狀態(tài)和計(jì)算屬性，確保它們保持響應(yīng)式。
• 直接調(diào)用 Store 中的方法來修改狀態(tài)。

4. 組合式 API 中使用 Store

Pinia 與 Vue 3 的組合式 API 完美契合。以下是一個(gè)在 setup 函數(shù)中使用 Store 的示例：

5. 模塊化 Store

在實(shí)際項(xiàng)目中，通常會(huì)有多個(gè) Store。Pinia 支持模塊化管理，您可以將不同的狀態(tài)邏輯拆分到多個(gè) Store 中。

例如，可以創(chuàng)建一個(gè) userStore 來管理用戶相關(guān)的狀態(tài)：

然后在組件中同時(shí)使用多個(gè) Store：