pinia 是 vue 3 推荐的状态管理方案，需先安装并全局注册，再创建 store 模块封装 state/getters/actions，组件中直接使用，配合持久化插件可解决刷新丢失登录态问题。
如果您正在为 Vue 3 项目选择状态管理方案，却发现组件间数据共享混乱、登录态丢失、跨路由状态不同步，则很可能是缺乏统一的状态管理机制。以下是基于 Pinia 的入门与实战落地步骤：
一、安装并全局注册 Pinia
Pinia 必须先集成到 Vue 应用实例中，才能被所有组件访问。注册后，整个应用获得响应式状态共享能力。
1、在项目根目录执行安装命令：pnpm add pinia（推荐）或 npm install pinia 或 yarn add pinia
2、打开 src/main.js（或 src/main.ts），导入并使用 Pinia 实例：
3、确保代码包含以下三行关键逻辑：import { createPinia } from 'pinia'、const pinia = createPinia()、app.use(pinia)
二、创建第一个 Store 模块
Store 是 Pinia 的核心单元，每个文件对应一个独立、可复用的状态模块。它封装 state、getters 和 actions，天然支持 TypeScript 类型推导。
1、在 src/stores/ 目录下新建 useCounterStore.js（或 .ts）
2、使用 defineStore 定义 store，首参为唯一 ID（如 'counter'），次参为配置对象
3、在配置中声明 state: () => ({ count: 0 })、getters: { doubleCount: (state) => state.count * 2 }、actions: { increment() { this.count++ } }
三、在组件中使用 Store
组件通过调用 store 工厂函数获取响应式 store 实例，直接解构 state 属性与 actions 方法，无需额外映射。
1、在 setup() 函数中导入并执行 store：const counterStore = useCounterStore()
2、解构需要的属性与方法：const { count, doubleCount, increment } = counterStore
3、在模板中绑定：{{ count }}、{{ doubleCount }}，并为按钮绑定 @click="increment"
四、实现用户登录状态管理
真实项目需持久化关键状态（如 token、userInfo）。该 store 将承担跨页面身份校验、自动刷新登录态等职责。
1、新建 src/stores/useUserStore.js，定义 state 包含 token: ''、userInfo: null、isLogin: false
2、编写 login(credentials) action：调用 API 获取 token 后，同步赋值 this.token = res.token 与 this.userInfo = res.user
3、添加 logout() action：清空 token 并重置 isLogin 为 false
五、启用状态持久化插件
浏览器刷新会导致 Pinia 默认状态丢失。通过 pinia-plugin-persistedstate 可将指定 state 自动存入 localStorage。
1、执行安装：pnpm add pinia-plugin-persistedstate
2、在 src/main.js 中导入插件并传入 createPinia()：
3、在目标 store（如 useUserStore）的 defineStore 配置中添加 persist: true，或精细化配置 paths: ['token', 'userInfo']
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
