安装完成后，需在项目入口文件中创建 Pinia 实例并挂载到 Vue 应用。在典型的 Vue 3.5 + TypeScript 项目中，推荐在 `src/store/index.ts` 中集中管理 Store 实例：

```typescript
// src/store/index.ts
import { createPinia } from 'pinia'

// 创建 Pinia 实例
const pinia = createPinia()

export default pinia

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import pinia from './store' // 导入 Pinia 实例

const app = createApp(App)
app.use(pinia) // 挂载 Pinia
app.mount('#app')

// src/store/cartStore.ts
import { defineStore } from 'pinia'

// 定义购物车商品类型接口
interface CartItem {
  id: string
  name: string
  price: number
  quantity: number
  imageUrl?: string // 可选的商品图片URL
}

// 定义 Store 类型，用于类型推导（可选但推荐）
interface CartState {
  items: CartItem[]
  isLoading: boolean // 加载状态标识
}

// 定义 cartStore
export const useCartStore = defineStore('cart', {
  // 状态定义：返回初始状态的函数（避免服务端渲染时的状态污染）
  state: (): CartState => ({
    items: [], // 购物车商品数组
    isLoading: false // 初始加载状态为 false
  }),

  // Getters：计算属性，基于 state 派生状态
  getters: {
    // 计算商品总数：累加所有商品的 quantity
    totalQuantity: (state) => state.items.reduce((sum, item) => sum + item.quantity, 0),
    
    // 计算商品总价：单价 × 数量 累加
    totalPrice: (state) => state.items.reduce(
      (sum, item) => sum + (item.price * item.quantity), 
      0
    )
  },

  // Actions：修改状态的方法（支持同步和异步）
  actions: {
    // 同步 Action：添加商品到购物车
    addItem(item: CartItem) {
      // 检查商品是否已存在，若存在则更新数量
      const existingItem = this.items.find(i => i.id === item.id)
      if (existingItem) {
        existingItem.quantity += item.quantity
      } else {
        this.items.push(item) // 新商品直接添加
      }
    },

    // 异步 Action：从 API 加载购物车数据（返回 Promise）
    async fetchItems() {
      this.isLoading = true // 开始加载，更新状态
      try {
        // 模拟 API 请求（实际项目替换为真实接口）
        const response = await fetch('/api/cart')
        const data: CartItem[] = await response.json()
        this.items = data // 成功后更新状态
        return data // 返回加载结果
      } catch (error) {
        console.error('Failed to fetch cart items:', error)
        throw error // 抛出错误供组件捕获
      } finally {
        this.isLoading = false // 无论成功失败，结束加载状态
      }
    }
  }
})

<!-- src/components/Cart.vue -->
<template>
  <div class="cart">
    <h2>购物车 ({{ cartStore.totalQuantity }})</h2>
    <div v-if="cartStore.isLoading">加载中...</div>
    <div v-else>
      <p>总价: ¥{{ cartStore.totalPrice.toFixed(2) }}</p>
      <button @click="loadCart">加载购物车</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCartStore } from '@/store/cartStore'

// 创建 Store 实例（注意：每次调用返回同一个实例，无需担心重复创建）
const cartStore = useCartStore()

// 调用异步 Action 加载数据
const loadCart = async () => {
  try {
    await cartStore.fetchItems()
    alert('购物车加载成功')
  } catch (error) {
    alert('加载失败，请重试')
  }
}
</script>

// 组件中调用 Getters
console.log(cartStore.totalPrice) // 首次调用：计算并缓存结果（假设 100）
console.log(cartStore.totalPrice) // 第二次调用：直接返回缓存的 100，不重新计算
cartStore.addItem({ id: '1', name: '商品', price: 50, quantity: 1 }) // 修改 state
console.log(cartStore.totalPrice) // 依赖变化：重新计算并缓存新结果（150）

getters: {
  totalPrice: (state) => {
    console.log('Calculating total price...')
    return state.items.reduce((sum, item) => sum + item.price * item.quantity, 0)
  }
}

async fetchItems() {
  this.isLoading = true
  try {
    const response = await fetch('/api/cart')
    if (!response.ok) throw new Error(`HTTP error: ${response.status}`) // 处理 HTTP 错误状态码
    const data: CartItem[] = await response.json()
    // 数据验证：确保返回数组且每个元素符合 CartItem 结构
    if (!Array.isArray(data)) throw new Error('Invalid cart data format')
    this.items = data
    return { success: true, data }
  } catch (error) {
    // 错误分类处理
    if (error instanceof TypeError) {
      console.error('Network error:', error)
    } else {
      console.error('Data error:', error)
    }
    this.items = [] // 错误时清空无效数据
    return { success: false, error: error.message }
  } finally {
    this.isLoading = false
  }
}

import { storeToRefs } from 'pinia'

const cartStore = useCartStore()
// 解构响应式状态（ref 对象）
const { items, isLoading } = storeToRefs(cartStore)
// 非响应式属性（如 getters、actions）直接解构
const { totalPrice, addItem } = cartStore

src/store/
├── cartStore.ts    // 购物车状态
├── userStore.ts    // 用户状态
└── index.ts        // 导出 Pinia 实例

// src/store/userStore.ts
import { defineStore } from 'pinia'

interface User {
  id: string
  name: string
  avatar?: string
}

interface UserState {
  user: User | null
  token: string | null
}

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    user: null,
    token: localStorage.getItem('token') || null // 初始化时从本地存储读取
  }),
  actions: {
    login(token: string, userData: User) {
      this.token = token
      this.user = userData
      localStorage.setItem('token', token) // 临时存储，实际项目建议用持久化插件
    },
    logout() {
      this.token = null
      this.user = null
      localStorage.removeItem('token')
    }
  }
})

<script setup lang="ts">
import { useCartStore } from '@/store/cartStore'
import { useUserStore } from '@/store/userStore'

const cartStore = useCartStore()
const userStore = useUserStore()

// 组合使用两个 Store 的状态和方法
const checkout = () => {
  if (!userStore.token) {
    alert('请先登录')
    return
  }
  console.log('Checkout with items:', cartStore.items)
}
</script>

npm install pinia-plugin-persistedstate

// src/store/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

const pinia = createPinia()
pinia.use(piniaPluginPersistedstate) // 注册持久化插件

export default pinia

// src/store/cartStore.ts
export const useCartStore = defineStore('cart', {
  state: () => ({ /* ... */ }),
  getters: { /* ... */ },
  actions: { /* ... */ },
  // 持久化配置
  persist: {
    enabled: true, // 启用持久化
    strategies: [
      {
        key: 'cart-storage', // 存储键名，默认是 Store 的 id
        storage: localStorage, // 存储位置：localStorage/sessionStorage
        paths: ['items'] // 指定需要持久化的 state 字段（默认所有字段）
      }
    ]
  }
})