Pinia 的模块化设计通过按业务拆分 store 文件实现清晰可控的状态管理,核心是 src/store 下建立 index.ts 初始化实例、modules 目录存放 user.ts 等业务模块,各模块用 defineStore 定义并导出 useUserStore 等函数,支持响应式、TypeScript 推断、持久化及 $reset 增强。

Pinia 的模块化设计让状态管理清晰可控,核心是按业务拆分 store 文件,再统一注册和导出。不依赖复杂约定,结构扁平、类型友好,适合中大型 Vue 3 项目。
目录结构与基础初始化
在 src/store 下建立标准结构:
- 创建 index.ts:调用
createPinia()实例化,并负责插件注册(如持久化)和模块导出; - 新建 modules/ 目录:每个文件对应一个业务域,比如
user.ts、cart.ts、order.ts; - 每个模块文件使用
defineStore定义独立 store,ID 唯一(如'user'),推荐命名规范为useUserStore。
模块内定义:state/getters/actions 分离
以用户模块为例,store/modules/user.ts 可这样组织:
- state 返回函数,包含登录态、用户信息等响应式数据;
-
getters 封装派生逻辑,如
isLoggedIn: (state) => !!state.token; -
actions 处理同步或异步操作,比如
login()调 API 并更新 state,logout()清空 token。
所有字段天然响应式,无需额外 ref 包裹,TypeScript 推断也直接可用。
立即学习“前端免费学习笔记(深入)”;
统一导出与全局挂载
store/index.ts 不仅创建实例,还承担“出口”角色:
- 可直接
export * from './modules/user'和export * from './modules/cart',便于按需导入; - 也可用
import * as modules from './modules',再逐个导出useUserStore、useCartStore; - 在 main.ts 中
app.use(pinia)即完成全局注入,组件内可随时调用。
可选增强:持久化与重置能力
模块化基础上容易叠加功能:
- 安装
pinia-plugin-persistedstate,在特定 store 配置persist: true或细化策略(如只存token到 localStorage); - 为所有 store 注入
$reset方法:在pinia.use()中保存初始 state 快照,调用时一键还原; - 避免跨模块耦合——模块间通信通过事件或组合式函数桥接,不直接 import 其他 store。


















