VueJS 在操作之前处理完整的模板

Posted 2023-02-23

【中文标题】VueJS 在操作之前处理完整的模板

【英文标题】：VueJS Process complete template before operations

【发布时间】：2020-06-01 14:27:51

【问题描述】：

下午好。

我现在有一个有趣的问题。我们有提供静态 html 内容翻译的第三方服务器。我需要通过 Ajax 获取这些内容并将其显示在我的 Vue 组件中。

目前的情况 这些翻译是通过类似字典的数据结构获取的，即通过类别和键。我们已经合并了一个 Vue 插件，通过 t 函数将这些加载到我们的组件中，如下所示：

<template>
    <section>
        <h1> t('CommonHeaders', 'HomePage') </h1>
        <p v-html="t('Articles', 'SiteDescription')"></p>
    </section>
</template>

目前，这些翻译通过将它们嵌入 HTML 来传送到浏览器，之后我们的客户端 hydration 机制读取它们并将它们添加到 Vuex 存储中。然后t 函数查找翻译并在需要的地方显示它们。这些翻译是反应式的，并接受数据参数来格式化翻译。

我们使用 Vue SFC 以类似 SPA 的方式呈现用户流，尽管该网站还不是 SPA。

问题 为了使其工作，页面所需的翻译必须在字典的后端控制器方法中列出。 这已经变得不可维护，并且发送到前端的数据比必要的要多得多。此外，当页面在发送到浏览器之前构建时，后端系统没有明确的端点，我们可以挂钩以便将翻译添加到 HTML 中，并且内容通常最终会被复制。 后端系统是使用 DotNet MVC 4 构建的，因此我们目前没有 s-s-r 功能。

解决方案（希望如此） 为了更好地维护我们的代码，我想利用插件中的 't' 函数在 vue 引擎渲染模板之前通过 AJAX 调用加载翻译，即通过 beforeCreate 或 创建钩子。问题是在触发 AJAX 调用之前，Vue 实例必须知道子组件模板中所需的翻译，而我不知道如何实现这一点。

附带说明，像这样延迟渲染违背了我的所有直觉，但看起来我们目前没有选择余地。 我计划使用内容哈希缓存翻译客户端，以防它们被更新，因此希望不会经常需要 ajax 调用，仅在首次加载时。 该站点正在逐渐转换为 SPA，此时我将能够拆分 FE 并通过节点使用 s-s-r。直到那时，尽管这是我能想到的最好的主意。

任何帮助将不胜感激。

【参考方案1】：

我一直在考虑这个问题，因为目前我只是在 App Init 上将整个缓存的 json 发送到带有加载屏幕的客户端，目前还不错，因为没有太多要翻译但正在考虑否则采用以下方法：

在翻译vuex模块中有一个数组存储需要translate（数组）的键列表。

让t() 将键推到translate（如果尚未在已翻译 存储中并返回空字符串 或占位符 直到翻译可重新获得。

在 mounted 上在 store 上调度 fetch 方法以执行 ajax 调用并设置翻译状态并在完成时清除 translate 列表。

默认情况下，Vue 应该在更改 VUEX 状态时重新呈现其行为，并导致模板正文中的 t() 被调用，并在 nextTick 上返回匹配值，而不是之前返回的 placeholder 值。

【讨论】：

这或多或少符合我的想法。但我的问题是，我不一定想在每个组件的挂载钩子中发送一个 fetch 方法，而是想将所有组件所需的所有翻译分组在一个请求中。这仅在初始加载时，之后异步加载的任何组件都必须执行额外的fetch。

在这种情况下，只需将 ajax 调用放在 setTimeout 中，每次 fetch 是 dispatched 时首先调用 clearTimeout，所以从多个组件快速调用 fetch 会取消请求直到申请解决。这将为您提供一个有效的缓冲区，以允许在发出最终 ajax 请求之前构建更大的密钥列表。