VueJS操作之前处理完整模板

Question

下午好。

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

当前情况这些翻译是通过类似字典的数据结构，即通过类别和关键字来获取的。我们已经集成了一个Vue插件，可以通过功能t将其加载到我们的组件中，如下所示：

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

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

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

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

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

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

任何帮助将不胜感激。

Answer 1

我一直在考虑这一点，因为现在我只是将整个缓存的json发送到带有加载屏幕的App Init上的客户端，此刻还不错，因为没有太多要翻译的内容，但我正在考虑否则，请遵循以下方法：

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

如果尚未存储在[[translated中，请将t()按到translate键，然后返回空字符串或占位符，直到重新激活翻译为止。

在mounted上，在商店上调度fetch方法以执行ajax调用并设置转换状态，并在完成后清除translate列表。

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