如何访问 asyncData 中的模板？答案

【问题标题】：How to get access to template in asyncData?如何访问 asyncData 中的模板？
【发布时间】：2021-07-17 12:35:21
【问题描述】：

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

i18.mergeLocaleMessage( locale, message )

怎么做？

【问题讨论】：

到目前为止你做了什么？ $el 是什么意思？
@kissu 我想在安装模板之前访问它。这是seo所必需的。
喜欢特定的div 吗？通常，您确实在 head() 中有 SEO。其他信息，可通过$refs 或script 标签获取。你有你想要得到的示例模板吗？
没有。我使用 nuxt-i18n 进行翻译。在模板 {{ $t('Hello') ]} 中，当可以访问 $el 时，已经加载了翻译，我想为当前页面加载它们。

【解决方案1】：

您可以使用类似这样的方式访问i18n，无需访问此用例的模板

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

查看lifecycle of Nuxt，asyncData 会在任何模板生成之前发生，所以用asyncData 是不可能的。
即使可以通过一些 hacky 技巧，必须查看模板内部然后有一些 i18n 获取的逻辑会有点奇怪。

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

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

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

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

【讨论】：