状态管理 State Management

Nuxt 提供了强大的状态管理库和可组合的 useState 来创建响应式和 SSR 友好的共享状态。

Nuxt 提供了可组合的 useState 来创建跨组件的响应式和 SSR 友好的共享状态。

useState 是 SSR 友好的 ref 替代品。 它的值将在服务器端渲染后(在客户端水合作用期间)保留,并使用唯一密钥在所有组件之间共享。

useState 仅在 setupLifecycle Hooks 期间有效.

因为 useState 中的数据将被序列化为 JSON,所以重要的是它不包含任何无法序列化的内容,例如类、函数或符号。

最佳实践

切勿在 <script setup>setup() 函数之外定义 const state = ref()
这种状态将在访问您网站的所有用户之间共享,并可能导致内存泄漏!

而是使用 const useX = () => useState('x')

示例

基础使用方法

在此示例中,我们使用组件本地计数器状态。 使用 useState('counter') 的任何其他组件共享相同的反应状态。

app.vue
<script setup>
const counter = useState('counter', () => Math.round(Math.random() * 1000))
</script>

<template>
  <div>
    Counter: {{ counter }}
    <button @click="counter++">
      +
    </button>
    <button @click="counter--">
      -
    </button>
  </div>
</template>

进阶用法

在此示例中,我们使用可组合项从 HTTP 请求标头检测用户的默认区域设置并将其保持在“区域设置”状态。

共享状态

通过使用自动导入的可组合项,我们可以定义全局类型安全状态并将它们导入整个应用程序。

composables/states.ts
export const useCounter = () => useState<number>('counter', () => 0)
export const useColor = () => useState<string>('color', () => 'pink')
app.vue
<script setup>
const color = useColor() // Same as useState('color')
</script>

<template>
  <p>Current color: {{ color }}</p>
</template>

使用第三方库

Nuxt 过去依赖 Vuex 库来提供全局状态管理。 如果您从 Nuxt 2 迁移,请前往 迁移指南

Nuxt 对状态管理没有意见,因此请随意选择适合您需求的解决方案。 与最流行的状态管理库有多种集成,包括:

  • Pinia - Vue 官方推荐
  • Harlem - 不可变的全局状态管理
  • XState - 状态机方法,带有用于可视化和测试状态逻辑的工具