Pinia 在 Vue 3 中安装配置只需三步：安装包、在 main.ts 中注册、用 defineStore 创建仓库；支持 TS，无需 map 辅助函数，开箱即用。
Pinia 在 Vue 3 项目中安装和配置非常直接，核心就三步：装包、注册、建仓库。不需要复杂模块划分或命名空间，上手快、结构清晰。
安装 Pinia
在项目根目录执行对应包管理命令：
-
npm：运行
npm install pinia -
yarn：运行
yarn add pinia -
pnpm：运行
pnpm add pinia
推荐使用与项目一致的包管理器，确保依赖版本兼容（Pinia v2.x 要求 Vue 3.2+，Node.js ≥16）。
在 main.js 或 main.ts 中全局注册
打开项目入口文件（Vite 默认为 src/main.js 或 src/main.ts），引入并挂载 Pinia 实例：
立即学习“前端免费学习笔记（深入）”；
- 导入
createPinia并创建实例 - 调用
app.use(pinia)注册，必须在app.mount()之前
示例（main.ts）：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
<p>const app = createApp(App)
const pinia = createPinia()
app.use(pinia) // 关键：注册状态管理器
app.mount('#app')
创建第一个状态仓库（store）
在 src/stores/ 目录下新建文件，比如 counterStore.ts（推荐 TS）：
- 用
defineStore定义仓库，第一个参数是唯一 ID（如'counter'） -
state返回初始数据对象（响应式基础） -
getters写计算逻辑（支持箭头函数或方法形式） -
actions封装修改逻辑（同步或异步均可）
示例代码：
// src/stores/counterStore.ts
import { defineStore } from 'pinia'
<p>export const useCounterStore = defineStore('counter', {
state: () => ({
count: 0,
name: '计数器'
}),
getters: {
doubleCount: (state) => state.count * 2
},
actions: {
increment() {
this.count++
},
reset() {
this.count = 0
}
}
})
注意：函数名习惯以 useXxxStore 命名，符合组合式 API 风格，也利于自动类型推导。
后续使用提示
仓库定义后，可在任意组件中按需导入并使用：
- 解构读取
state和getters（自动响应式） - 直接调用
actions方法修改状态 - 无需
mapState或mapActions等映射，写法更扁平
持久化、插件扩展、TypeScript 类型细化等属于进阶需求，基础配置到这一步已可运行。
