Pinia支持TypeScript

以下是关于 Pinia 的全面解析，结合最新版本（3.0）特性与最佳实践，帮助开发者高效使用这一 Vue 官方推荐的状态管理工具：

---

一、Pinia 核心优势

Pinia 作为 Vue 生态的官方状态管理库，相较于 Vuex 具有以下优势：

1. 简洁性：移除 mutations，仅保留 state、getters、actions，API 设计更直观。
2. TypeScript 支持：天然支持类型推断，提供严格的类型安全检查。
3. 轻量化：压缩后仅约 2KB，性能优化显著（Pinia 3.0 内存占用降低 30%）。
4. 模块化：Store 独立管理，支持灵活拆分与复用。
5. 组合式 API 整合：深度适配 Vue 3 的 setup 语法，开发体验更现代化。

---

二、Pinia 3.0 核心更新

2025年2月发布的 Pinia 3.0 带来多项关键改进：

1. Vue 3 专属支持：放弃 Vue 2 兼容，需搭配 Vue 3.3+ 和 TypeScript 5+。
2. 组合式 API 强化：
   • 推荐使用 defineStore 的函数式写法（类似 setup）。
   • 新增 storeToRefs() 工具函数，优化响应式解构。
3. 性能优化：
   • 响应式系统重构，减少依赖追踪开销。
   • 推荐使用 $patch 批量更新状态，减少渲染次数。
4. 工具链升级：
   • 适配 Vue Devtools 7.x，增强调试体验。
   • Nuxt 3 原生支持，旧版本需迁移至 bridge 方案。

---

三、核心使用指南

1. 定义 Store

组合式 API 写法（推荐）：

// stores/counter.ts
import {
   
    defineStore } from 'pinia';
import {
   
    ref, computed } from 'vue';

export const useCounterStore = defineStore('counter', () => {
   
   
  const count = ref(0);
  const double = computed((