时间戳

首页 > 解决方案 > Nuxt 使用 vuex 和多语言站点生成

nuxt.js - Nuxt 使用 vuex 和多语言站点生成

问题描述

我目前正在使用 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 通过nuxt dev. asyncData()如果用户切换了区域设置，则其他区域设置的提取将由fetch()客户端处理。

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

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

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

可能的解决方法

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

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

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

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

谢谢，瓦伦丁

标签： nuxt.jsvuexnuxt-i18n

解决方案

问题的原因

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

因此，首先，on将每个路由的 store 和布局和页面组件generate的结果保存在一个文件中，以模拟生成的静态站点上的 API 调用（https://nuxtjs.org/blog/完全静态/#crazy-fast-static-applications）。nuxtServerInit()asyncData()fetch()payload.js

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

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

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

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

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

解决方案

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

推荐阅读