本来这是一个比较简单的事情，但是只要涉及服务端渲染，问题就会复杂化，状态的初始化在服务端进行，想要带着状态信息到客户端，就要提前序列化存储，到了客户端激活时，又要确保在被调用前恢复。这些操作如果没有框架支持会相当复杂。还好 Nuxt 替我们处理了这些，隐藏了很多处理细节，我们不需要关心序列化或 XSS 攻击，只是使用就好了。本节涉及内容如下：

• Nuxt 内置的状态管理模块 useState()；
• 整合全局状态管理库：Pinia。

# Nuxt3 内置的状态管理

Nuxt3 提供了 useState()，用于创建响应式的且服务端友好的跨组件状态。

useState() 对于 React 用户来说在熟悉不过了，两者确实有类似之处，但是除了给组件声明状态之外，Nuxt3 中的 useState() 还能用于创建全局状态。

# useState 方法签名

可以看到 useState()有两个重载，一个接收提供初始值的工厂函数，另一个多了唯一的 key 用于缓存数据，而返回值是一个 Ref 类型。

r
复制代码useState<T>(init?: () => T | Ref<T>): Ref<T>
useState<T>(key: string, init?: () => T | Ref<T>): Ref<T>

# useState 基本用法

我们在组件中用 useState() 声明一个状态，counter.vue。

xml
复制代码<template>
  <div class="p-4">
    Counter: {{ counter }}
    <div class="mt-2">
      <NButton
        @click="
          counter++;
        "
        >+</NButton
      >
      <NButton
        @click="
          counter--;
        "
        >-</NButton
      >
    </div>
  </div>
</template>

<script setup lang="ts">
const counter = useState("counter", () => Math.round(Math.