在可组合项中使用 useState 时 Nuxt 3 中的水化问题

Question

我有一个 useHeaderTitle 组合，用于设置和获取 headerTitle：

import type { Ref } from "vue";

export default () => {
    const headerTitle: Ref<string> = useState("headerTitle");

    const setHeaderTitle = (title: string): void => {
        headerTitle.value = title;
    };

    return {
        headerTitle,
        setHeaderTitle,
    };
};

我在我的标题组件中使用它是这样的：

<template>
    <header class="h-12 flex justify-between items-center gap-3">
        <div class="header-title text-2xl basis-32 flex-shrink-0">
            {{ headerTitle }}
        </div>
    </header>
</template>

<script setup lang="ts">
const { headerTitle } = useHeaderTitle();
</script>

在 evert 页面中这样设置：

<template>
    <div class="w-full h-full flex items-center justify-center">
        This is the home page.
    </div>
</template>

<script setup lang="ts">
const { setHeaderTitle } = useHeaderTitle();

setHeaderTitle("Home");
</script>

但是我遇到水合作用不匹配错误，并且我的 headerTitle 数据未在服务器中呈现。仅在水合作用后显示。

我试过使用它 useAsyncData 但后来我读到我不应该那样做。我该如何解决这个问题。我希望我的 headerTitle 能够在服务器端呈现而不会不匹配。