函数: useI18n()
调用签名
ts
function useI18n<Options>(options?): Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, Options["locale"] extends unknown ? string : Options["locale"]>;类型参数
参数
| 参数 | 类型 |
|---|---|
options? | Options |
返回值
Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, Options["locale"] extends unknown ? string : Options["locale"]>
调用签名
ts
function useI18n<Schema, Locales, Options>(options?): Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, NonNullable<Options["locale"]>>;使用 Vue I18n 的组合式 API
类型参数
| 类型参数 | 默认类型 | 描述 |
|---|---|---|
Schema | LocaleMessage<VueMessageType> | 国际化资源（消息、datetimeFormats、numberFormats）模式，默认为 LocaleMessage |
Locales | "en-US" | 国际化资源模式的语言环境，默认为 en-US |
Options 扩展 UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, ComposerOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleMessages<SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, VueMessageType>, IntlDateTimeFormats<SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, string>, IntlNumberFormats<SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, string>>> | UseI18nOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, ComposerOptions<SchemaParams<Schema, VueMessageType>, LocaleParams<Locales>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? D : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, LocaleParams<Locales> extends object ? N : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, LocaleMessages<SchemaParams<Schema, VueMessageType> extends object ? M : LocaleMessage<VueMessageType>, LocaleParams<Locales> extends object ? M : LocaleParams<Locales> extends string ? string & LocaleParams<Locales> : string, VueMessageType>, IntlDateTimeFormats<SchemaParams<Schema, VueMessageType> extends object ? D : IntlDateTimeFormat, string>, IntlNumberFormats<SchemaParams<Schema, VueMessageType> extends object ? N : IntlNumberFormat, string>>> |
参数
| 参数 | 类型 | 描述 |
|---|---|---|
options? | Options | 选项，参见 UseI18nOptions |
返回值
Composer<NonNullable<Options["messages"]>, NonNullable<Options["datetimeFormats"]>, NonNullable<Options["numberFormats"]>, NonNullable<Options["locale"]>>
Composer 实例
备注
此函数主要在 setup 中使用。
如果指定了选项，则为每个组件创建 Composer 实例，您可以在组件上进行本地化。
如果未指定选项，则可以使用全局 Composer 进行本地化。
示例
情况：组件资源基础本地化
html
<template>
<form>
<label>{{ t('language') }}</label>
<select v-model="locale">
<option value="en">en</option>
<option value="ja">ja</option>
</select>
</form>
<p>message: {{ t('hello') }}</p>
</template>
<script>
import { useI18n } from 'vue-i18n'
export default {
setup() {
const { t, locale } = useI18n({
locale: 'ja',
messages: {
en: { ... },
ja: { ... }
}
})
// 做一些事情 ...
return { ..., t, locale }
}
}
</script>