🎯 Zustand 使用示例

轻量级状态管理库(仅 3KB)

查看 lib/store/demo.ts 获取完整代码

📊 示例 1: 基础计数器

0

代码示例:
const count = useCounterStore(s => s.count)
const increment = useCounterStore(s => s.increment)

👤 示例 2: 用户信息 (带持久化)

未登录

💡 持久化: 刷新页面,登录状态会保持(存储在 localStorage)

🛒 示例 3: 购物车

商品列表

📱 iPhone

$999

💻 MacBook

$1999

⌚ Apple Watch

$399

购物车

购物车是空的

🌐 示例 4: 异步数据加载

🎨 示例 5: 主题切换 (带持久化)

当前主题: dark

💡 刷新页面,主题设置会保持

📝 示例 6: 表单管理

📚 学习资源

  • • 完整代码: lib/store/demo.ts
  • • 组件代码: app/[locale]/zustand-demo/components/
  • • 文档: docs/ZUSTAND_GUIDE.md
  • • 官方文档: https://docs.pmnd.rs/zustand
Biya Dex - DEX Trading Platform