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

【问题标题】：Use Svelte i18n in service / simple JS file在服务/简单 JS 文件中使用 Svelte i18n
【发布时间】：2021-11-05 11:50:10
【问题描述】：

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

但是我有一些 JS 文件（例如常量），我想使用 i18n 来翻译一些键，例如（/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 文件中使用_ 函数吗？或者我应该创建一种纤细的组件来处理我的常量？

【问题讨论】：

标签： svelte svelte-component

【解决方案1】：

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

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

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

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

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

使用 get()

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

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

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

从文本中返回函数

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

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

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

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

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

【讨论】：