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

以下是更新要點：

• 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

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

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

npm install pinia

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

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

通過以上代碼，Pinia 已經成功集成到 Vue 3 項目中

2. 創(chuàng)建 Store

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

以下是一個簡單的 Store 示例：

在上面的代碼中：

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

3.  在組件中使用 Store

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

在上面的代碼中：

• 使用 useCounterStore 獲取 Store 實例。
• 使用 storeToRefs 解構狀態(tài)和計算屬性，確保它們保持響應式。
• 直接調用 Store 中的方法來修改狀態(tài)。

4. 組合式 API 中使用 Store

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

5. 模塊化 Store

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

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

然后在組件中同時使用多個 Store：