此错误会导致生产期间的问题NUXT33
我从特定的代码行中获得了下面的错误，最初将其设置为服务器上的一个值，然后在客户端登录中根据其登录状态设置为不同的值。
[Vue warn]: Hydration text mismatch:
- Client: "Sign In"
- Server: "Sign Out"
at <RouterLink to="/auth" activeClass=undefined exactActiveClass=undefined ... >
at <NuxtLink key=0 to="/auth" onClick=fn<handleSignOut> >
at <Nav class="dark:bg-darkBg dark:text-darkSecondary" >
at <Default >
at <AsyncComponentWrapper >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="layout" mode="out-in" >
at <Anonymous>
at <App key=1 >
at <NuxtRoot>
我不知道为什么这是来自.vue文件的代码
<li class="nav-li">
<NuxtLink to="/auth" v-if="authStore.isLoggedIn" @click="handleSignOut">
Sign Out
</NuxtLink>
<NuxtLink to="/auth" v-else>Sign In</NuxtLink>
</li>
I got this error below from a specific line of code where it is initially set to one value on the server and then when the client logins in it is set to a different value based on their login status.
[Vue warn]: Hydration text mismatch:
- Client: "Sign In"
- Server: "Sign Out"
at <RouterLink to="/auth" activeClass=undefined exactActiveClass=undefined ... >
at <NuxtLink key=0 to="/auth" onClick=fn<handleSignOut> >
at <Nav class="dark:bg-darkBg dark:text-darkSecondary" >
at <Default >
at <AsyncComponentWrapper >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at <Transition name="layout" mode="out-in" >
at <Anonymous>
at <App key=1 >
at <NuxtRoot>
I do not know why this is the case here is the code from the .vue file
<li class="nav-li">
<NuxtLink to="/auth" v-if="authStore.isLoggedIn" @click="handleSignOut">
Sign Out
</NuxtLink>
<NuxtLink to="/auth" v-else>Sign In</NuxtLink>
</li>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
这意味着文本已更改为服务器上的“签名”，并在水合后变为“登录”，这是因为
authstore.isloggedin的值在水合后已更改。为了解决它，您可以使用cookie，在水合之前在服务器上设置您的身份验证状态以及客户端处理。
That means The Text has been changed it was "Sign Out" on the server, and become "Sign In" after hydration, And that's because the value of
authStore.isLoggedInhas been changed after hydration.To solve it you can use cookies, to set up your authentication state on the server before hydration, and client-side processing.
有关此问题的更多详细信息可以在此处找到： https://stackoverflow.com/a/a/a/67978474/8816585
服务器端的内容与客户端的内容不同。作为快速比较，您可以在有没有JS的情况下加载应用程序的页面，以查看不同的内容。
否则，这在性能方面是一个巨大的问题，可能导致怪异的错误。我建议修复它。不确定针对您特定情况的确切解决方案，但是
authstore可能可以通过在服务器和客户端端都可以使用的方式完成。More details regarding this issue can be found here: https://stackoverflow.com/a/67978474/8816585
But mainly, the content on the server side is different from the one on the client side. As a quick comparison, you can load the page of your app with and without JS to see what is different.
Otherwise, this is a huge problem in terms of performance and can lead to weird bugs. I recommend fixing it. Not sure of the exact solution for your specific case, but
authStorecould probably be done in a way that could work on both server and client side.