状态管理

Nuxt 提供了强大的状态管理库和 useState 组合函数，用于创建响应式且适用于 SSR 的共享状态。

Nuxt 提供了 useState 组合函数，用于在组件之间创建响应式且适用于 SSR 的共享状态。

useState 是一个适用于 SSR 的 ref 替代品。它的值将在服务器端渲染后保留（在客户端渲染期间进行 hydration），并通过唯一的键在所有组件之间共享。

INFO

由于useState内部的数据将被序列化为 JSON，因此重要的是它不包含无法序列化的内容，如类、函数或符号。

示例

用法

在这个示例中，我们使用一个组件本地的计数器状态。任何使用 useState('counter')的其他组件都共享同一个响应式状态。

<script setup lang="ts">
  const counter = useState("counter", () => Math.round(Math.random() * 1000));
</script>

<template>
  <div>
    计数器：{{ counter }}
    <button @click="counter++">+</button>
    <button @click="counter--">-</button>
  </div>
</template>

共享状态

• composables/states.ts

export const useCounter = () => useState < number > ("counter", () => 0);
export const useColor = () => useState < string > ("color", () => "pink");

• app.vue

<script setup lang="ts">
  const color = useColor(); // 与useState('color')相同
</script>

<template>
  <p>当前颜色：{{ color }}</p>
</template>

或者使用第三方库

• Pinia Vuex 等等