如何避免 nuxt 应用程序中的“客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配”警告？答案

【问题标题】：How to avoid "The client-side rendered virtual DOM tree is not matching server-rendered content" warning in nuxt app?如何避免 nuxt 应用程序中的“客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配”警告？
【发布时间】：2021-06-03 20:42:18
【问题描述】：

在我的 nuxt 应用程序中，我使用 mount() 方法从 localStorage 读取数据并将它们提交到应用程序存储中。

mounted() {
  const basket = JSON.parse(localStorage.getItem('basket'))
  if (basket) {
    this.$store.commit('setBasket', basket)
  }
}

这会导致警告客户端渲染的虚拟 DOM 树与服务器渲染的内容不匹配

我找到了解决方案：

mounted() {
  setTimeout(() => {
    const basket = JSON.parse(localStorage.getItem('basket'))
    if (basket) {
      this.$store.commit('setBasket', basket)
    }
  }, 100)
}

现在控制台中没有警告。如果超时值为 0 或 10 而不是 100 毫秒 - 然后再次在控制台中发出警告

有没有更优雅的方式来解决这个问题？

【问题讨论】：

标签： nuxt.js

【解决方案1】：

client-only 组件在这里很有帮助，因为此代码仅用于客户端。

像这样将篮子收到的物品包装在您的模板中

<client-only>
  <my-basket-items><my-basket-items> <!-- coming from the localStorage -->
</client-only>

除此之外，这是一篇非常棒的文章，讨论了这类问题：https://blog.lichter.io/posts/vue-hydration-error/

【讨论】：

谢谢，@kissu，我试过了，但对我没有帮助。我包裹在整个购物篮组件和该组件的一部分中。对我没有影响 UPD：我发现了一个问题。从 localStorage 加载的状态数据不仅使用篮子，还使用其他组件