Vue/Nuxt布局中客户端身份验证和计算属性的水合问题

Question

我的应用程序(vue/nuxt 3(将用户身份验证状态存储在localStorage中。因此，它只能在客户端上使用，并且预提交的页面总是显示未经验证的内容。客户端在意识到经过身份验证的内容后会立即呈现。这是可以接受的。

然而，这似乎不适用于计算属性。我的整个布局取决于身份验证状态，例如：

<template>
<div :class="computedClasses">
<slot />
</div>
</template>
<script setup>
const computedClasses = computed(() => ({ 
if ($someReferenceToStore.user.logged.in) {
return 'loggedin'
} else {
return 'anonymous'
}
}))
</script>

问题是，即使用户登录，computedClasses也不会更新为loggedin，而是显示了服务器生成的anonymous。如何解决这个问题？如何使客户端更新计算的属性并覆盖服务器呈现的类？

我知道，我可以用<ClientOnly>包装我的模板中依赖于身份验证状态的部分，以避免水合不匹配。用<ClientOnly>包装我的布局基本上会禁用任何服务器渲染。我可以仅将元素(:class="..."(的属性设置为客户端吗？

Answer 1

我当前的解决方案是使用正在更新的ref。

<template>
<div :class="computedClasses">
<slot />
</div>
</template>
<script setup>
const computedClasses = ref('');
onMounted(() => {
computedClasses.value = $someReferenceToStore.user.logged.in ? 'loggedin' : 'anonymous';
});
</script>

根据使用情况，可能还需要添加一个观察程序来更新ref。