Vue状态管理应按需选择、分层治理：小项目用ref和provide/inject，中大型项目首选Pinia，其轻量、TS友好、模块化，支持持久化与服务端同步，并强调类型安全与可维护性。
Vue 应用的状态管理，核心在于“按需选择、分层治理”——小项目用 ref 和 provide/inject 足够；中大型项目必须引入集中式 Store，并通过模块化、类型约束和副作用分离来保障可维护性。
全局 Store：Pinia 是当前 Vue 官方推荐的首选
Vue 3 生态中，Pinia 已完全取代 Vuex 成为默认状态管理方案。它轻量（约 1KB）、TypeScript 友好、API 简洁，且天然支持组合式 API 风格。
- 一个 store 就是一个函数，返回响应式状态、计算属性和方法，无需 mutations/types/action 套路
- store 实例可直接在组件中使用，也支持 SSR 和跨 tab 同步（配合 localStorage 插件）
- 调试体验优秀：Devtools 自动识别 store，支持时间旅行、状态快照导出
模块化设计：按业务域拆分 Store，避免单体臃肿
随着功能增长，把所有状态塞进一个 store 会迅速失控。Pinia 天然支持模块化——每个 domain（如 user、cart、order）对应一个独立 store。
- 每个模块 store 文件单独定义，职责清晰，便于测试与复用
- 模块间可通过
useOtherStore()显式调用，避免隐式依赖 - 复杂联动逻辑建议抽离到 composables（如
useCartSync()），而非放在 store 内部
状态持久化与服务端同步：别让本地状态脱离真实数据源
用户登录态、购物车、主题偏好等常需持久化；订单、消息等则必须与后端强一致。这两类场景需不同策略：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 本地缓存用
pinia-plugin-persistedstate，支持按 store 或字段粒度控制，注意敏感字段（如 token）要加密或禁用存储 - 服务端状态应以 API 响应为准，store 中只做缓存和乐观更新；关键操作（如支付）必须 await 接口成功后再 commit
- 使用
watch或 store 的$subscribe监听变化，触发同步逻辑，但避免无限循环（加防抖或条件过滤）
类型安全与可维护性：TS + ESLint 是生产级项目的底线
Pinia 对 TypeScript 支持极佳，但需主动规范才能发挥价值：
- state 类型用接口定义，actions 返回值标注，getters 显式声明类型（尤其涉及泛型或联合类型时）
- 禁止在 store 中直接调用
axios，统一由 API service 层封装，store 只负责状态流转 - 启用
@typescript-eslint/no-explicit-any和pinia/define-store-return等自定义规则，拦截低质量写法
状态管理不是越重越好，而是越贴合业务生命周期越稳。从单一 ref 到模块化 Pinia，本质是把“谁该持有状态、何时更新、如何验证”这些隐性约定，变成显性结构和可执行约束。
