Nuxt 使用 vuex 和多语言站点生成

Question

我目前正在使用 nuxt 和无头 Wordpress 作为 CMS 构建我的第一个（静态生成的）网站。我还使用模块nuxt-i18n 来支持多语言：德语（默认）和英语。

设置

要从多语言 Wordpress 中获取数据，我使用模块 wp-nuxt，然后将来自 CMS 的数据存储在 vuex 存储中。取决于客户端浏览器语言或用户手动更改语言时，$wp (wp-nuxt) 的端点会更改，因此将获取适当的内容并将其存储在存储中。

现在，在NuxtServerInit() 上，从 CMS 中获取路由定义的区域设置的一些基本数据（例如，http://myserver/en/news 将从英文 CMS 端点 http://wphost/mycms/en/wp-json/wp/v2/... 获取基本数据，请参阅端点中的 /en/）。对于每个布局/页面，通过asyncData() 和fetch() 获取更多内容，当然，对于当前语言环境也是如此。

问题

只要通过 nuxt dev 运行 nuxt，它就可以正常工作。如果用户切换了区域设置，则其他区域设置的提取将由客户端上的asyncData() 和fetch() 处理。

nuxt generate 也适用于站点首次加载的语言环境，但是在切换语言环境时会出现问题：在商店中找不到数据。

我的猜测是：在generate 上，nuxt 正在为每条路线调用nuxtServerInit()、asyncData() 和fetch()。这将使用路线区域设置数据填充每条路线的存储。对于 DE-Routes（例如 myserver/impressum）德语内容，对于 EN-routes（例如 myserver/en/site-notice）英语内容。但是如果用户改变了locale，这些路由的stores只包含当前locale的内容，asyncData()和fetch()不会被调用来填充store（当然这是@987654344的设计@)。

因此，在我看来，nuxt 正在为不同的路由存储不同的“vuex 存储实例”，并且无法在用户启动的区域设置切换时切换到存储。

可能的解决方法

我已经尝试了一些简单的解决方法，似乎可以解决问题，但远非完美：

1. 在语言切换时触发重新加载，因此网站被重新加载，并且 nuxt 正在为具有正确区域设置的路线加载商店。 - 我不喜欢它，感觉很老套。

2. 通过nuxtServerInit() 使用两种语言的数据填充存储，方法是获取两个 CMS 端点。 - 我也不喜欢它，感觉很老套，虽然它可能适用于两种语言，但开销很大，但 CMS 的内容越多。

我希望我能够恰当地描述问题。有什么我想念的吗？到目前为止，我还没有找到任何关于此的内容。如果您对此有任何想法，我将不胜感激。

谢谢， 瓦伦丁

Answer 1

问题原因

我终于找到了问题的根源。我将与您分享我的误解，以便对具有类似设置的人有所帮助。

所以首先，在generate 上，将商店的nuxtServerInit() 以及每个路由的布局和页面组件的asyncData() 和fetch() 的结果保存在payload.js 文件中，以模拟对生成的静态站点 (https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applications) 进行 API 调用。

在写原帖的时候，我做了两件事，使得nuxt在手动切换语言时不存储每个页面组件的fetch()方法的全部payload：

1. 在nuxtServerInit() 上，我获取了所有路由的一些 API 数据（例如 网站标题、导航栏的主页列表等）

2. 在页面组件中的fetch() 上，我获取了所需的资源 仅当这些不在 nuxt 商店中。恕我直言，这在 SSR/SPA 站点中是有意义的，因为如果您已经拥有数据，则无需获取（并等待）。

因此，这意味着 nuxt generate为每个页面获取此数据，nuxtServerInit() 保存与 nuxtServerInit 关联的有效负载。但是，它确实不将有效负载保存在 fetch() 上，因为页面组件的 fetch() 方法中的 if 条件在生成时返回 false - 因为数据是已使用 nuxtServerinit() 获取。

因此，在生成的静态站点上切换区域设置触发了路由页面组件的模拟fetch()，但此方法的有效负载不包含数据。

解决方案

最简单的解决方案是，如果 isStatic 为真，则不在 nuxtServerInit() 上获取任何或至少任何特定于语言环境的数据，并在页面或布局组件中进行获取。