Pinia 状态管理演示

展示 Pinia 在 Nuxt 3 中的使用方法和最佳实践

计数器 Store

状态信息

Store 名称:Counter Store
当前计数:0
双倍计数:0
是否为偶数:是

操作

用户 Store

用户信息

请先登录

提示: 邮箱包含 "admin" 将获得管理员权限

Store 状态调试

计算属性
userName: 游客
userRole: guest
isAdmin: false
userInitials: G
原始状态
{
  "user": null,
  "isLoggedIn": false,
  "loading": false,
  "preferences": {
    "theme": "auto",
    "language": "zh-CN",
    "notifications": true
  }
}

Pinia 使用说明

功能特性

  • • 类型安全的状态管理
  • • Composition API 风格
  • • 自动代码分割
  • • 开发工具支持
  • • 服务端渲染兼容
  • • 轻量级 (~2kb)

最佳实践

  • • 使用 Composition API 定义 stores
  • • 合理拆分 stores 职责
  • • 利用计算属性优化性能
  • • 在客户端操作本地存储
  • • 使用 TypeScript 增强类型安全
  • • 适当使用 reactive 和 ref

代码示例

// 在组件中使用 store
const counterStore = useCounterStore()
const userStore = useUserStore()

// 访问状态
console.log(counterStore.count)
console.log(userStore.userName)

// 调用动作
counterStore.increment()
userStore.login(email, password)