pinia 是 vue 官方推荐的轻量级状态管理库，天然适配 vue 3 composition api，api 简洁、体积小、typescript 支持完善；三步即可启用：安装注册、定义类型安全 store、组件中导入使用，支持自动类型推导、ide 补全与响应式更新。
Pinia 是 Vue 官方推荐的 Vuex 替代方案，它天然适配 Vue 3 Composition API，API 更简洁、体积更小、TypeScript 支持更完善。用它管理轻量但类型安全的全局状态，不需要复杂配置，三步就能跑通：安装注册、定义 Store、组件中使用。
安装并全局注册 Pinia
在项目中执行安装命令：
- npm install pinia（或 yarn add pinia / pnpm add pinia）
- 打开 main.ts，引入并注册 Pinia 实例：
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const app = createApp(App)
app.use(createPinia())
app.mount('#app')
定义类型明确的 Store
在 src/stores/user.ts 中创建一个用户 Store，TypeScript 类型自动推导无需手动声明接口：
- state 返回函数，属性类型由初始值直接推断（如 token: '' → string，age: 0 → number）
- getters 的返回值类型也自动推导，支持用 this 访问其他 getter，拼写错误会被 TS 立即捕获
- actions 可显式标注参数与返回类型，异步请求结果赋值时仍保持类型安全
import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
state: () => ({
token: '',
name: '',
age: 0
}),
getters: {
isAdult(): boolean { return this.age >= 18 }
},
actions: {
setInfo(name: string, token: string) {
this.name = name
this.token = token
}
}
})
在组件中安全读写状态
任何组件（包括 setup script 或 Options API）都能直接导入并使用 Store：
- 调用 useUserStore() 获取实例，TS 自动识别其类型（含 state、getters、actions）
- 访问 store.name 或调用 store.setInfo('张三', 'abc123') 时，IDE 提供完整补全和类型校验
- 跨组件修改状态后，所有引用该 store 的地方实时响应，且无运行时类型错误风险
<script setup></script>
import { useUserStore } from '@/stores/user'
const user = useUserStore()
user.setInfo('李四', 'def456')
console.log(user.name, user.isAdult)
按需增强：轻量场景下的实用补充
对轻量应用，以下两点能进一步提升体验：
- 持久化（可选）：装 pinia-plugin-persistedstate，几行代码让 token、主题等关键状态刷新不丢失
- 模块解耦：每个业务域（如 user、cart、theme）单独建文件，命名空间隔离，类型互不影响，协作开发不冲突
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
