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。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
