Vuejs2 VueJS流程操作前完成模板

下午好

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

当前形势
这些翻译是通过类似字典的数据结构获取的，即通过类别和键。我们整合了一个Vue插件，通过函数

t

将其加载到我们的组件中，如下所示：

{{t（'CommonHeaders'，'HomePage'）}

目前，通过将这些翻译嵌入HTML将其发送到浏览器中，之后我们的客户端水合机制将读取这些翻译并将其添加到Vuex存储中。

t

功能然后查找翻译并在需要时显示它们。这些翻译是被动的，接受数据参数来格式化翻译。

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

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

解决方案（希望）
为了更好地维护我们的代码，我希望在vue引擎呈现模板之前，即通过beforeCreate或created挂钩，利用插件中的“t”函数通过AJAX调用加载翻译。问题是Vue实例必须知道子组件模板中所需的翻译，然后才能启动AJAX调用，我不知道如何实现这一点。

顺便说一句，像这样延迟渲染违背了我的直觉，但现在看来我们没有选择的余地
我计划使用内容哈希缓存翻译客户端，以防它们被更新，因此希望不经常需要ajax调用，只在第一次加载时使用。
该站点正逐渐转变为SPA，届时我将能够分离FE并通过节点使用SSR。直到那时，这是我能想到的最好的主意。

---

任何帮助都将不胜感激。

我自己一直在考虑这一点，因为目前我只是在App Init上通过加载屏幕向客户端发送了一个完整的缓存json，目前还不错，因为没有太多东西需要翻译，但正在考虑以下其他方法：

让translation vuex模块中的数组存储需要翻译的键列表（数组）

让

t（）

将键按到

translate

（如果尚未在translated中）存储并返回空字符串或占位符，直到翻译重新可用

在

mounted

上，在存储上调度一个

fetch

方法来执行ajax调用并设置翻译状态，完成后清除

translate

列表

---

默认情况下，Vue应在VUEX状态发生更改时重新呈现其行为，并导致调用模板体中的

t（）

，并在

nextTick

上返回匹配值，而不是先前返回的

placeholder

值。

这或多或少符合我的想法。但我的问题是，我不一定要在每个组件上挂载的钩子中发送一个dispatch a

fetch

方法，而是要将所有组件所需的所有翻译分组到一个请求中。这只是初始加载，之后异步加载的任何组件都必须执行额外的

获取

。在这种情况下，只需将ajax调用放在

setTimeout

中，每次

fetch

调度

fetch

时，首先调用

clearTimeout

，因此从多个组件快速调用

fetch

会取消请求，直到应用程序解决。这将为您提供一个有效的缓冲区，以允许在发出最后的

ajax

请求之前构建更大的键列表。