nuxt.js - 如何访问 asyncData 中的模板？

Question

我想在 asyncData 中访问 this.$el。我使用数据库来存储翻译。我想获取当前页面上使用的翻译列表。然后我会向服务器发送一个请求来接收它们。之后，我将合并它。

i18.mergeLocaleMessage( locale, message )

怎么做 ？

Answer 1

您可以使用i18n类似的东西进行访问，无需访问此用例的模板

asyncData ({ app }) {
  console.log(app.i18n.t('Hello'))
}

---

查看Nuxt 的生命周期，asyncData会发生在任何模板生成之前，因此不可能使用asyncData.
即使有一些 hacky 技巧是可能的，必须查看模板内部然后有一些 i18n 获取的逻辑会有点奇怪。

computed在获取所有所需的翻译之后，为什么不通过模板获取嵌套对象并循环呢？

另外，您asyncData每次都在使用 + API 调用？因此，对于每个页面：您将停止用户，让他等待 API 调用然后继续？

最后一点，如果你在你的页面上并且你点击了F5，那么asyncData钩子将不会被触发。只是为了让你知道这个警告。

替代解决方案：

• 使用fetch()钩子并显示加载器，直到您获取所有翻译，最好不要依赖模板的内容。这甚至可以工作F5并且可以产生更流畅的体验（通过不阻止导航）。
• i18n在您的用户连接空闲时，在全球范围内获取您的全部翻译。而不是每页。特别是因为您将需要处理不获取您已经拥有的某些翻译的逻辑（如果用户访问一个页面两次）。