🎯 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