作用域和语言环境切换

作用域

Vue I18n 管理资源以提供 i18n 功能，包括语言环境切换、称为语言环境消息的每种语言消息，以及日期和数字的命名格式。它们通过 VueI18n 实例进行管理。

Vue 应用程序由树状结构中的某些组件构建而成。要在 Vue I18n 中使用 i18n 功能对每个组件进行本地化，我们需要理解作用域的概念。

Vue I18n 有两种作用域：

• 全局作用域
• 本地作用域

全局作用域

Vue 中的全局作用域允许您在整个应用程序的所有组件中访问和管理国际化（i18n）资源。这对于集中管理 i18n 特别有用。

当您使用 createI18n 创建 i18n 实例时，会自动创建全局作用域。此全局作用域与 VueI18n 实例相关联，可以通过 i18n 实例的全局属性访问。本质上，全局作用域指的是可通过 i18n 实例的全局属性访问的 VueI18n 实例。

如果在组件中未指定 i18n 选项，则该组件会自动启用全局作用域。在这种情况下，通过组件内的 this.$i18n 访问的 VueI18n 实例与通过 i18n 实例的全局属性可用的全局实例相同。

本地作用域

Vue 中的本地作用域允许您按组件管理 i18n 资源，类似于单文件组件中的 <style scoped>。当组件具有本地作用域时，只有该组件的 i18n 资源处于活跃状态。当您想要管理每个组件特有的语言环境消息时，这特别有用。

通过在组件内指定 i18n 选项来启用本地作用域。这将在组件初始化时创建一个新的 VueI18n 实例。因此，通过该组件中的 this.$i18n 访问的 VueI18n 实例与通过 i18n 实例的全局属性可用的全局 VueI18n 实例不同。

语言环境切换

到目前为止，我们已经解释了作用域的概念，一旦您理解了作用域，就很容易理解如何切换语言环境。

全局作用域

如果您想更改整个应用程序的语言环境，全局作用域允许您为每个组件使用 $i18n.locale。

以下是一个示例：

const i18n = createI18n({
  locale: 'ja', // 设置当前语言环境
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  },
  // vue-i18n 的一些选项在这里...
  // ...
})

// 创建 Vue 应用实例，安装 Vue I18n 并挂载！
createApp({
  // 这里有一些 Vue 选项...
  // ...
}).use(i18n).mount('#app')

组件：

<template>
  <div class="locale-changer">
    <select v-model="$i18n.locale">
      <option
        v-for="locale in $i18n.availableLocales"
        :key="`locale-${locale}`"
        :value="locale"
      >
        {{ locale }}
      </option>
    </select>
  </div>
</template>

上述示例使用 VueI18n 实例的 availableLocales 属性将可用语言环境列在 select 元素的选项中。由于 $i18n.locale 与 v-model 绑定，您可以通过选择 select 元素的选项来切换它，这会将其值设置为 $i18n.locale。

正如您所看到的，全局作用域非常有用，因为它允许您一次性切换应用程序所有组件显示的消息。

本地作用域

本地作用域的 locale 默认从全局作用域继承。因此，当您更改全局作用域中的 locale 时，本地作用域中的 locale 也会更改。

如果您想切换整个应用程序的语言环境，则需要通过使用 createI18n 创建的 i18n 实例的 global 属性进行更改。

注意

如果您不想从全局作用域继承 locale，则需要将 i18n 组件选项的 sync 设置为 false。

示例：

const i18n = createI18n({
  locale: 'ja', // 设置当前语言环境
  // vue-i18n 的一些选项在这里...
  // ...
})

// 创建 Vue 应用实例，安装 Vue I18n 并挂载！
createApp({
  // 这里有一些 Vue 选项...
  // ...
}).use(i18n).mount('#app')


// 通过 `global` 属性更改语言环境

// 当 vue-i18n 与 legacy: false 一起使用时，请注意 i18n.global.locale 是一个 ref，
// 所以我们必须通过 .value 设置它：
i18n.global.locale.value = 'en'

// 否则 - 当使用 legacy: true 时，这样设置：
i18n.global.locale = 'en'

注意

更改本地作用域的语言环境不会影响全局作用域的语言环境。这意味着在本地作用域组件中更改 $i18n.locale 不会更改整个应用程序的语言环境，而只会更改该组件。请改用 $root.$i18n.locale 而不是 $i18n.locale。