Nuxt useState 状态管理 Demo

1. 基础计数器(跨组件共享状态)

0

这个计数器状态在所有页面间共享,刷新页面后状态会重置

2. 用户信息管理

当前用户信息:

{
  "name": "",
  "email": "",
  "age": null
}

3. 待办事项列表

总计:0 项,已完成:0 项

4. 主题切换(持久化状态)

当前主题:light

这个主题状态会在页面刷新后保持

5. 购物车管理

商品列表:

MacBook Pro
¥12999
iPhone 15
¥5999
AirPods Pro
¥1899
iPad Air
¥4399

购物车:

总价:¥0
商品数量:0

6. 状态管理操作

useState 使用说明

基本用法: const state = useState('key', () => defaultValue)

状态共享: 相同 key 的 useState 在整个应用中共享状态

响应式: 返回的状态是响应式的,修改会自动更新 UI

SSR 友好: 在服务端和客户端之间自动同步状态

生命周期: 状态在页面刷新时重置,除非使用持久化方案