📘 Pinia 状态管理

🧩 30章 · 从零到项目
🚀 点击卡片跳转对应章节 · 友好配色
01 Pinia入门
Pinia是什么 为什么选择Pinia 与Vuex对比 核心概念
02 环境搭建
创建Vue3项目 安装Pinia 注册Pinia 项目结构规划
03 第一个Store
选项式 vs 组合式 创建counter Store 组件中使用Store
04 State核心
定义State 访问/重置State $patch批量修改 响应式解构
05 Getters详解
定义/访问Getters Getters传参 访问其他Getters 缓存特性
06 Actions实战
同步/异步Actions 调用其他Actions 返回结果
07 组件通信
父传子/子传父 兄弟共享State 跨层级通信 Provide/Inject+Pinia
08 模块化设计
拆分Store文件 命名规范 模块间相互调用 大型项目组织策略
09 插件机制
Pinia插件介绍 编写第一个插件 插件生命周期 持久化/日志
10 持久化存储
localStorage手动 pinia-plugin-persistedstate 加密存储 选择性持久化
11 TypeScript支持
为Store定义类型 State/Getters类型推导 Actions类型 组件类型安全
12 组合式API风格
setup Store写法 ref/reactive computed替代Getters 函数替代Actions
13 选项式API风格
options Store state/getters/actions 与Vuex迁移对比
14 Store间通信
StoreA调用StoreB 避免循环依赖 共享状态设计 事件总线替代
15 路由与状态
路由参数同步Store 路由守卫访问Store 页面权限控制 登录状态管理
16 请求封装
Axios实例 请求/响应拦截器 Token管理 请求状态Store
17 用户认证
用户信息Store 登录/登出逻辑 Token刷新 权限路由/持久化
18 列表管理
商品列表Store 分页/搜索筛选 加载状态 缓存策略
19 购物车实战
购物车Store设计 添加/删除/修改数量 总价计算 本地同步
20 主题切换
主题Store CSS变量/暗黑模式 主题持久化 动态切换动画
21 多语言支持
i18n Store设计 语言切换 翻译文件管理 动态加载语言包
22 表单状态管理
表单Store设计 验证/重置 多步骤表单 数据持久化
23 WebSocket集成
连接管理/消息Store 心跳检测/断线重连 实时数据更新
24 缓存策略
内存/locastorage/IndexedDB 缓存过期策略 与Store结合
25 错误处理
全局错误捕获 错误状态Store 错误提示/日志 优雅降级
26 性能优化
Store按需加载 组件级订阅 Shallow Ref 大型Store拆分
27 测试策略
单元测试Store 模拟Pinia实例 测试Actions/Getters 组件与Store交互
28 SSR兼容
Nuxt3集成Pinia 服务端渲染注意事项 状态水合/内存泄漏 SSR安全
29 微前端集成
微前端Store共享 qiankun集成 Module Federation 状态隔离/通信
30 项目实战
电商后台管理系统 Store架构设计 API对接/部署上线 总结回顾