Nuxt 生成与 vuex 和多语言站点
Nuxt generate with vuex and multi-language site
我目前正在使用 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/）。对于每个 layout/page，通过 asyncData() 和 fetch() 获取更多内容，当然，对于当前语言环境也是如此。
问题
这很好用，只要 nuxt 通过 nuxt dev 是 运行。如果用户切换语言环境，则其他语言环境的提取将由客户端的 asyncData() 和 fetch() 处理。
nuxt generate 也适用于站点最初加载的语言环境，但是在切换语言环境时会遇到麻烦：在商店中找不到数据。
我的猜测是：在 generate 上，nuxt 正在为每个路由调用 nuxtServerInit()、asyncData() 和 fetch()。这将用路线区域设置数据填充每条路线的商店。对于 DE-Routes（例如 myserver/impressum）德语内容，对于 EN-routes（例如 myserver/en/site-notice）英语内容。但是如果locale被用户改变了，这些routes的store只包含当前locale的内容，asyncData()和fetch()不会被调用去填充store（当然这是通过generate).
的设计
因此，在我看来，nuxt 正在为不同的路由存储不同的“vuex 商店实例”，并且无法在用户启动的区域设置切换时切换到商店。
可能的解决方法
有一些我已经尝试过的简单解决方法，似乎可以解决问题，但远非完美：
在语言切换时触发重新加载，因此重新加载站点并且 nuxt 正在为具有正确语言环境的路由加载商店。 - 我不喜欢，感觉很老套。
通过 nuxtServerInit() 使用两种语言的数据填充商店，方法是针对两个 CMS 端点进行提取。 - 我也不喜欢它，感觉很老套，虽然它可能适用于两种语言，但开销很大，CMS 的内容越多。
我希望我能够恰当地描述问题。有什么我想念的吗？到目前为止，我还没有发现任何东西。如果您对此有任何想法，我将不胜感激。
谢谢，
瓦伦丁
问题原因
我终于找到了问题的根源。我将与您分享我的误解，这样它可能会对具有类似设置的人有所帮助。
所以首先，在 generate 上保存商店 nuxtServerInit() 的结果以及每个布局和页面组件的 asyncData() 和 fetch() payload.js 文件中的路由以模拟对生成的静态站点 (https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applications) 的 API 调用。
原来写post的时候做了两件事，使得nuxt在手动切换语言的时候，不会存储每个页面组件的fetch()方法的全部payload：
在 nuxtServerInit() 我为所有路线获取了一些 API 数据（例如
站点标题、导航栏的主要页面列表等）
在fetch()页面组件中我获取了需要的资源
仅当这些不在 nuxt 商店中时。恕我直言，这在 SSR/SPA 站点中是有意义的，因为如果您已经拥有数据，则无需获取（并等待）。
因此，这意味着 nuxt generate 为每个 页面获取此数据 ，其中 nuxtServerInit() 保存与 nuxtServerInit 关联的有效负载。但是，它 不会 将负载保存在 fetch() 上，因为页面组件 fetch() 方法中的 if 条件 在生成时 returns false - 因为数据已经用 nuxtServerinit().
获取了
因此，在生成的静态站点上切换区域设置会触发路由页面组件的模拟 fetch()，但此方法的有效负载不包含数据。
解决方案
最简单的解决方案是，如果 isStatic 为真，则不在 nuxtServerInit() 上获取任何或至少不获取任何 locale-specific 数据，并在页面或布局组件中进行获取。
我目前正在使用 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/）。对于每个 layout/page，通过 asyncData() 和 fetch() 获取更多内容，当然，对于当前语言环境也是如此。
问题
这很好用，只要 nuxt 通过 nuxt dev 是 运行。如果用户切换语言环境，则其他语言环境的提取将由客户端的 asyncData() 和 fetch() 处理。
nuxt generate 也适用于站点最初加载的语言环境，但是在切换语言环境时会遇到麻烦：在商店中找不到数据。
我的猜测是：在 generate 上，nuxt 正在为每个路由调用 nuxtServerInit()、asyncData() 和 fetch()。这将用路线区域设置数据填充每条路线的商店。对于 DE-Routes（例如 myserver/impressum）德语内容，对于 EN-routes（例如 myserver/en/site-notice）英语内容。但是如果locale被用户改变了，这些routes的store只包含当前locale的内容，asyncData()和fetch()不会被调用去填充store（当然这是通过generate).
因此，在我看来，nuxt 正在为不同的路由存储不同的“vuex 商店实例”，并且无法在用户启动的区域设置切换时切换到商店。
可能的解决方法
有一些我已经尝试过的简单解决方法，似乎可以解决问题，但远非完美：
在语言切换时触发重新加载，因此重新加载站点并且 nuxt 正在为具有正确语言环境的路由加载商店。 - 我不喜欢，感觉很老套。
通过
nuxtServerInit()使用两种语言的数据填充商店，方法是针对两个 CMS 端点进行提取。 - 我也不喜欢它，感觉很老套，虽然它可能适用于两种语言，但开销很大，CMS 的内容越多。
我希望我能够恰当地描述问题。有什么我想念的吗？到目前为止，我还没有发现任何东西。如果您对此有任何想法，我将不胜感激。
谢谢， 瓦伦丁
问题原因
我终于找到了问题的根源。我将与您分享我的误解，这样它可能会对具有类似设置的人有所帮助。
所以首先，在 generate 上保存商店 nuxtServerInit() 的结果以及每个布局和页面组件的 asyncData() 和 fetch() payload.js 文件中的路由以模拟对生成的静态站点 (https://nuxtjs.org/blog/going-full-static/#crazy-fast-static-applications) 的 API 调用。
原来写post的时候做了两件事，使得nuxt在手动切换语言的时候，不会存储每个页面组件的fetch()方法的全部payload：
在
nuxtServerInit()我为所有路线获取了一些 API 数据（例如 站点标题、导航栏的主要页面列表等）在
fetch()页面组件中我获取了需要的资源 仅当这些不在 nuxt 商店中时。恕我直言，这在 SSR/SPA 站点中是有意义的，因为如果您已经拥有数据，则无需获取（并等待）。
因此，这意味着 nuxt generate 为每个 页面获取此数据 ，其中 nuxtServerInit() 保存与 nuxtServerInit 关联的有效负载。但是，它 不会 将负载保存在 fetch() 上，因为页面组件 fetch() 方法中的 if 条件 在生成时 returns false - 因为数据已经用 nuxtServerinit().
因此，在生成的静态站点上切换区域设置会触发路由页面组件的模拟 fetch()，但此方法的有效负载不包含数据。
解决方案
最简单的解决方案是，如果 isStatic 为真，则不在 nuxtServerInit() 上获取任何或至少不获取任何 locale-specific 数据，并在页面或布局组件中进行获取。