Nuxt 3 推荐两种方案：内置的 `useState()` composable 和 Pinia（通过 `@pinia/nuxt` 模块集成）。`useState()` 适合跨组件共享简单响应式状态，天然 SSR 安全——服务端和客户端状态自动同步，无需额外处理水合。Pinia 适合复杂状态管理，支持 actions、getters、插件生态，且同样对 SSR 友好。Vuex 是 Nuxt 2 时代的默认方案，Nuxt 3 已不再内置。

## 追问

- `useState()` 和 `ref()` 在 SSR 场景下有什么区别？为什么不能用 `ref()` 共享状态？
- Pinia store 在 Nuxt 3 中如何避免跨请求状态污染？
- `useState()` 的底层实现原理是什么？它是怎么保证 SSR 水合一致的？
- 什么场景下 `useState()` 不够用，必须上 Pinia？
- Nuxt 3 的 `useState()` 可以在普通 JS 文件中使用吗？还是必须在 setup 中？

## 写段代码

```js
// composables/useCounter.js - useState 方案
export const useCounter = () => useState('counter', () => 0)

// stores/user.js - Pinia 方案
export const useUserStore = defineStore('user', () => {
  const user = ref(null)
  const login = async (creds) => { user.value = await $fetch('/api/login', creds) }
  return { user, login }
})
```