useState 跨组件状态共享

// 在任意组件或 Composable 中
const count = useState<number>('counter', () => 0)
// 参数 1：唯一 key（字符串）
// 参数 2：初始化函数（仅首次调用时执行）
// 返回值：Ref<number>
 
count.value++  // 响应式更新

<!-- 组件 A -->
<script setup lang="ts">
const user = useState<User | null>('user', () => null)
</script>
 
<!-- 组件 B（不同文件，同一页面） -->
<script setup lang="ts">
const user = useState<User | null>('user')
// 同一个 key → 同一个 Ref → 数据共享
// 组件 A 修改 user，组件 B 自动更新
</script>

// ❌ 不安全：模块级全局变量
// 在 SSR 中，服务端是单进程多请求共享
// 一个用户的数据会泄漏给另一个用户
const globalUser = ref<User | null>(null)  // 💥 所有请求共享同一个 ref
 
// ✅ 安全：useState
// Nuxt 为每个请求创建独立的状态空间
const user = useState<User | null>('user', () => null)
// 用户 A 的请求有自己的 user 状态
// 用户 B 的请求有自己的 user 状态
// 互不影响

// ref：每个组件实例各自独立
// 组件 A
const count = ref(0)  // 组件 A 的 count = 0
count.value = 5       // 组件 A 的 count = 5
 
// 组件 B
const count = ref(0)  // 组件 B 的 count = 0（与 A 无关）
 
// ---
 
// useState：同 key 共享同一个 Ref
// 组件 A
const count = useState('count', () => 0)  // 创建并初始化
count.value = 5                            // 设为 5
 
// 组件 B
const count = useState('count', () => 0)  // 发现已存在，返回同一个 Ref
console.log(count.value)                   // 5（与 A 共享）

// 服务端：
const theme = useState('theme', () => 'dark')  // 初始化为 'dark'
 
// SSR HTML 中：
// <script>window.__NUXT__ = { state: { theme: 'dark' } }</script>
 
// 客户端 Hydration：
const theme = useState('theme', () => 'light')  // 初始化函数被忽略
console.log(theme.value)  // 'dark'（来自服务端的 Payload）

// ✅ 可以：基础类型、对象、数组
useState('count', () => 0)
useState('user', () => ({ name: 'Alice', age: 25 }))
useState('tags', () => ['vue', 'nuxt'])
 
// ❌ 不可以：函数、类实例、Symbol、循环引用
useState('handler', () => () => {})           // 函数不可序列化
useState('date', () => new Date())            // Date 对象序列化后变成字符串
useState('map', () => new Map())              // Map 不可序列化
useState('regex', () => /pattern/)            // RegExp 不可序列化

// 存储为 ISO 字符串
const createdAt = useState('createdAt', () => new Date().toISOString())
 
// 使用时转换
const date = computed(() => new Date(createdAt.value))

const nuxtApp = useNuxtApp()
 
// 直接访问所有 useState 的值
console.log(nuxtApp.payload.state)
// { counter: 0, user: { name: 'Alice' }, theme: 'dark' }
 
// 清除状态（如用户登出）
function logout() {
  clearNuxtState('user')       // 清除指定 key
  clearNuxtState(['user', 'cart'])  // 清除多个
  clearNuxtState()             // 清除所有
}

// 场景 1：用户认证状态
const user = useState<User | null>('auth-user', () => null)
const isLoggedIn = computed(() => !!user.value)
 
// 场景 2：UI 状态
const sidebarOpen = useState('sidebar-open', () => true)
const theme = useState<'light' | 'dark'>('theme', () => 'light')
const locale = useState('locale', () => 'zh-CN')
 
// 场景 3：简单的共享数据
const currentVideo = useState<Video | null>('current-video', () => null)
 
// 场景 4：封装为 Composable
export function useAuth() {
  const user = useState<User | null>('auth-user', () => null)
  const isLoggedIn = computed(() => !!user.value)
 
  async function login(credentials: LoginData) {
    user.value = await $fetch('/api/auth/login', {
      method: 'POST',
      body: credentials,
    })
  }
 
  function logout() {
    user.value = null
    navigateTo('/login')
  }
 
  return { user, isLoggedIn, login, logout }
}

// 轻量级全局状态 → useState
const theme = useState('theme', () => 'light')
const locale = useState('locale', () => 'zh-CN')
 
// 复杂业务状态 → Pinia
const videoStore = useVideoStore()  // 视频列表、筛选、分页
const cartStore = useCartStore()    // 购物车逻辑