在服务/简单 JS 文件中使用 Svelte i18n

Question

我在我的项目中使用 Svelte i18n，它在我的 Svelte 组件中完美运行。

但我有一些 JS 文件（例如常量），我想使用 i18n 来翻译一些键，例如 (in /services/constants.js) ：

import { _ } from 'svelte-i18n'

export const STATUS_OK = 1;
export const STATUS_PENDING = 2;
export const STATUS_ERROR = 3;
export const STATUS_INACTIVE = 4;
export const STATUS_PRICE_NOT_FOUND = 5;

export const STATUTES = {
  [STATUS_OK]: {
    text: _('urls.statutes.ok'),
    class: 'text-green-500',
  },

但我得到一个错误，我可以_在 JS 文件中使用函数吗？或者我应该创建一种简洁的组件来处理我的常量？

Answer 1

如果我理解正确的工作方式svelte-i18n，_就是一个store，这就是为什么你可以在组件中执行以下操作

<p>{$_('urls.statuses.ok')}</p>

创建$订阅并获取商店的当前值，您可以在该值上执行函数来获取给定的密钥。

在您的代码中，您执行_('urls.statuses.ok')的是您尝试在store上执行的函数，而不是在store 的值上执行的函数。而正是这个“价值”才真正为你提供了国际化的功能。

但您不能在 javascript 文件中使用$，因此这里您有两个选择：

使用 get()

您可以import { get } from 'svelte/store'为您提供一个返回商店当前值的函数，这意味着您可以将代码更改为如下所示：

text: get(_)('urls.statuses.ok')

这样做的一个缺点是它不会创建订阅，或者换句话说，如果语言发生变化，这个常量不会改变，因为get不会再次运行，它只运行一次。

从文本返回一个函数

另一个选择是一个更大的改变，即重新定义text为函数

text: _ => _('urls.statuses.ok')

在这里，我们将存储从外部传递到函数内部，将其直接导入到 javascript 文件中。用法是

<p>{STATUTES.STATUS_OK($_)}</p>

如您所见，我们将存储的值传递到函数中，这意味着在函数内部我们可以按预期使用我们的存储，因为当语言更改时，该块将被重新评估，它将始终获取当前语言就像我们得到的第一个一样get。