在服务/简单的 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 的正确工作方式，_ 是一个商店，这就是为什么您可以在组件

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

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

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

你不能在 javascript 文件中使用 $，所以这里你有两个选择：

使用get()

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

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

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

return 来自文本的函数

另一个选项是一个更大的变化，即将 text 重新定义为一个函数

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

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

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

如您所见，我们将商店的值传递给函数，这意味着在函数内部我们可以按预期使用我们的商店，因为当语言改变时，这块将被重新评估，它将始终获得 current 语言而不是像我们在 get.

中获得的初始语言

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

Use Svelte i18n in service / simple JS file

svelte

svelte-component