Pinia 中定义 Store 的核心是 defineStore()，支持 Options 和 Composition 两种风格：Options 风格语义清晰、适合初学者，state 为函数返回响应式对象，getters 类似 computed，actions 中 this 指向 store；Composition 风格贴近 Vue 3 组合式 API，用 ref/computed 等响应式 API，需显式 return 才暴露为公共接口；组件中应使用 storeToRefs() 解构以保持响应性；持久化依赖插件（如 pinia-plugin-persistedstate），支持多存储介质与精细化配置；TypeScript 下建议显式标注 state、getter 和 action 类型以保障类型安全。

Pinia 中定义 Store 的核心是 defineStore()，它支持 Options 和 Composition 两种风格，状态存取天然响应式，配合插件可轻松实现现代化持久化。

定义 Store 的两种方式

Options 风格更接近 Vue 选项式 API，语义清晰、适合初学者或逻辑较集中的场景：

• state 返回一个对象，相当于组件的 data，必须是函数形式以保证响应式隔离
• getters 接收 state 作为参数，类似 computed，支持链式调用和缓存
• actions 是普通函数，this 指向 store 实例，可同步或异步操作，直接修改 this 上的 state 属性

Composition 风格更贴近 Vue 3 组合式 API，适合复杂逻辑拆分与复用：

• 内部使用 ref、computed、watch 等响应式 API，返回的对象属性自动暴露为 store 的 public 接口
• 所有需被外部访问的响应式值（包括 state 和 getters）都必须显式 return
• 私有变量（如未 return 的 ref 或局部常量）不会被 Pinia 跟踪，也不会出现在 devtools 中

在组件中安全高效地使用 Store

推荐使用 storeToRefs() 解构 store 的响应式属性，避免丢失响应性：

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

立即学习“前端免费学习笔记（深入）”；

• 直接解构 count 或 doubleCount 会破坏 ref 的响应连接，导致视图不更新
• storeToRefs 只对 store 中的 ref/computed 属性做浅层解构，保留其响应式本质
• action 方法无需解构，直接从 store 实例上调用即可，this 上下文依然有效

例如：const { count, doubleCount } = storeToRefs(counter); 是安全写法；const { count } = counter; 则不可取。

实现现代化状态持久化

Pinia 本身不内置持久化，但通过插件机制（如 pinia-plugin-persistedstate 或自研插件）可按需定制：

• 支持 localStorage、sessionStorage、cookie 三种存储介质，可按 store 实例单独配置
• 通过 keyPrefix 统一管理键名前缀，避免跨项目 key 冲突
• 可精确控制哪些 store 需要持久化（manageStoreKeys），或排除特定 store（unManageStoreKeys）
• 插件自动监听 state 变化，在 nextTick 后写入存储，兼顾性能与一致性

类型安全与工程实践建议

搭配 TypeScript 使用时，强烈建议显式声明 state 类型：

• Options 风格中，state 函数的返回值类型可通过泛型或接口标注，如 state: (): UserState => ({ ... })
• Composition 风格中，ref 的类型由初始值或泛型推导，建议配合 interface 明确约束
• getter 的返回类型也应明确标注，尤其当涉及复杂计算或联合类型时
• action 参数类型可完整定义，提升调用时的 IDE 提示与编译检查能力