Pinia 3.0 正式发布，不再支持 Vue 2
vue 官方推荐的状态管理工具 Pinia 最近更新到了 3.0 版本。这个版本有一个最重要的变化：它彻底放弃了对 Vue 2 的支持，现在只专注于 Vue 3 的生态。如果你还在使用 Vue 2 进行开发，那么你需要继续使用 Pinia 的 2.x 版本。
这次 3.0 的更新，主要目的不是增加新功能，而是清理掉一些旧的、已经过时的接口，并且升级了核心的依赖包。这是一个标志性的版本，意味着 Pinia 已经完全拥抱 Vue 3 的时代。
主要更新内容：
只支持 Vue 3：这是最大的改变。Pinia 3.0 只能用在 Vue 3 项目中。
需要 TypeScript 5：如果你想使用 Pinia 3.0，你的 TypeScript 版本需要是 5.0 或更高。
开发者工具升级：配套的 Vue Devtools api 已经更新到第 7 版。
Nuxt 模块更新：Pinia 的 Nuxt 模块现在只支持 Nuxt 3。如果你用的是 Nuxt 2 或者 Nuxt Bridge，请继续使用旧版本的 Pinia。
对于刚刚开始接触 Vue 3 和 Pinia 的开发者来说，了解这些变化很重要，它能帮你做出正确的技术选型。下面，我们来快速回顾一下 Pinia 的基本使用方法，帮助你更好地理解和使用它。
如何在 Vue 3 项目中安装和使用 Pinia
第一步：安装
打开你的项目终端，运行下面的命令来安装 Pinia：
npm install pinia第二步：创建并挂载 Pinia
在你的 Vue 应用入口文件（通常是 main.js 或 main.ts）中，你需要先创建一个 Pinia 实例，然后把它安装到 Vue 应用里。
// main.js 或 main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia' // 导入创建函数
import App from './App.vue'
// 1. 创建 Pinia 实例
const pinia = createPinia()
// 2. 创建 Vue 应用
const app = createApp(App)
// 3. 将 Pinia 挂载到应用上
app.use(pinia)
app.mount('#app')做完这一步，Pinia 就已经成功集成到你的项目中了。
第三步：创建一个 Store（状态仓库）
Store 是 Pinia 的核心，你可以把它理解为一个专门管理某一部分数据（状态）的容器。一个 Store 包含了数据本身、计算属性和修改数据的方法。
我们创建一个简单的计数器 Store 作为例子。新建一个文件 stores/counter.js（或 counter.ts）：
// stores/counter.js
import { defineStore } from 'pinia'
// 使用 defineStore 定义并导出一个 Store
// 第一个参数是 Store 的唯一名称，全局唯一
export const useCounterStore = defineStore('counter', {
// state 定义这个 Store 里存储的数据
state: () => ({
count: 0,
name: '我的计数器'
}),
// getters 可以看作是 state 的计算属性，用于派生新数据
getters: {
doubleCount: (state) => state.count * 2,
},
// actions 里定义方法，用于修改 state 中的数据（同步或异步都可以）
actions: {
increment() {
this.count++ // 在 actions 里，通过 `this` 访问整个 store 实例
},
decrement() {
this.count--
},
// 一个异步 action 的例子
async incrementAsync() {
await new Promise(resolve => setTimeout(resolve, 1000)) // 模拟等待1秒
this.increment() // 可以调用其他的 action
}
}
})第四步：在组件中使用 Store
定义好 Store 后，你就可以在任何组件中导入并使用它了。
<!-- MyComponent.vue -->
<template>
<div>
<h1>{{ store.name }}</h1>
<p>当前计数: {{ count }}</p>
<p>双倍计数: {{ doubleCount }}</p>
<button @click="store.increment()">增加</button>
<button @click="store.decrement()">减少</button>
<button @click="store.incrementAsync()">异步增加</button>
<!-- 也可以直接修改，但不推荐，最好通过 actions -->
<button @click="store.count += 10">直接加10</button>
</div>
</template>
<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia' // 一个有用的工具函数
// 1. 获取 Store 实例
const store = useCounterStore()
// 2. 使用 storeToRefs 来解构 state 和 getters
// 这样做能保证解构出来的变量仍然是响应式的（可以直接在模板中使用）
const { count, name, doubleCount } = storeToRefs(store)
</script>第五步：模块化管理（多个 Store）
在真实项目中，你肯定需要管理多种不同的数据，比如用户信息、商品列表、设置项等。Pinia 鼓励你创建多个独立的 Store 来实现模块化管理。
例如，我们再创建一个管理用户信息的 Store：
// stores/user.js
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: '',
userInfo: { name: '', avatar: '' }
}),
actions: {
async login(username, password) {
// 模拟登录请求
const res = await api.login(username, password)
this.token = res.token
this.userInfo = res.userInfo
},
logout() {
this.token = ''
this.userInfo = { name: '', avatar: '' }
}
}
})然后在组件中，你可以同时使用多个 Store：
<script setup>
import { useCounterStore } from '@/stores/counter'
import { useUserStore } from '@/stores/user'
const counterStore = useCounterStore()
const userStore = useUserStore()
// 现在可以同时访问两个仓库的数据和方法
console.log(counterStore.count)
console.log(userStore.userInfo.name)
</script>总结
Pinia 3.0 的发布，标志着 Vue 3 生态系统的一个重要组成部分已经成熟和稳定。对于新启动的 Vue 3 项目，强烈建议直接使用 Pinia 3.0 作为状态管理工具。它的设计简洁直观，与 Vue 3 的组合式 API 配合得天衣无缝，大大降低了状态管理的学习成本和心智负担。
对于正在使用 Vue 2 和 Pinia 2 的项目团队，可以根据自己的升级计划来决定何时迁移。在迁移之前，请务必仔细阅读 Pinia 的官方迁移指南，确保升级过程平稳顺利。
记住 Pinia 的核心步骤：安装 -> 挂载 -> 定义 Store -> 在组件中使用。掌握了这个流程，你就能轻松管理 Vue 3 应用中的复杂状态了。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
