Alcance y Cambio de Idioma

Alcance

Vue I18n gestiona recursos para ofrecer funciones de internacionalización, incluyendo el cambio de idioma, los mensajes de cada idioma llamados mensajes de idioma, y el formato nombrado para fechas y números. Estos se gestionan con la instancia VueI18n.

La aplicación Vue está construida a partir de algunos componentes en una estructura de árbol. Para localizar cada uno de los componentes en Vue I18n utilizando las funciones de i18n, necesitamos comprender el concepto de alcance.

Vue I18n tiene dos alcances:

• alcance global
• alcance local

Alcance Global

El alcance global en Vue le permite acceder y gestionar recursos de internacionalización (i18n) en todos los componentes de su aplicación. Esto es especialmente útil para centralizar la gestión de i18n.

Cuando crea una instancia i18n usando createI18n, se crea automáticamente un alcance global. Este alcance global está vinculado a la instancia VueI18n, que puede accederse a través de la propiedad global de la instancia i18n. Esencialmente, el alcance global se refiere a la instancia VueI18n que es accesible a través de la propiedad global de la instancia i18n.

Si no se especifica la opción i18n en un componente, el alcance global se habilita automáticamente para ese componente. En este caso, la instancia VueI18n accedida a través de this.$i18n dentro del componente es la misma que la instancia global disponible a través de la propiedad global de la instancia i18n.

Alcance Local

El alcance local en Vue le permite gestionar recursos de i18n a nivel de componente, similar a cómo funciona <style scoped> en componentes de archivo único. Cuando un componente tiene un alcance local, solo los recursos de i18n de ese componente están activos. Esto es particularmente útil cuando desea gestionar mensajes de idioma específicos para cada componente.

El alcance local se habilita especificando la opción i18n dentro del componente. Esto crea una nueva instancia VueI18n cuando se inicializa el componente. Como resultado, la instancia VueI18n accedida a través de this.$i18n en ese componente es distinta de la instancia VueI18n global disponible a través de la propiedad global de la instancia i18n.

Cambio de Idioma

Hasta ahora, hemos explicado el concepto del alcance, y una vez que entienda el alcance, es fácil entender cómo cambiar el idioma.

Alcance Global

Si desea cambiar el idioma para toda la aplicación, el alcance global le permite usar el $i18n.locale para cada componente.

Aquí hay un ejemplo:

const i18n = createI18n({
  locale: 'ja', // establecer idioma actual
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  },
  // opciones de vue-i18n aquí ...
  // ...
})

// crear instancia de aplicación Vue, instalar Vue I18n y montar!
createApp({
  // opciones de vue aquí ...
  // ...
}).use(i18n).mount('#app')

Componente:

<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>

El ejemplo anterior utiliza la propiedad availableLocales de la instancia VueI18n para listar los idiomas disponibles como opciones para el elemento de selección. Dado que $i18n.locale está ligado con v-model, puede cambiarlo seleccionando la opción del elemento de selección, lo cual establece su valor en $i18n.locale.

Como puede ver, el alcance global es muy útil porque le permite cambiar los mensajes mostrados en la interfaz de usuario para todos los componentes de la aplicación al mismo tiempo.

Alcance Local

El locale del alcance local se hereda del alcance global por defecto. Por lo tanto, cuando cambia el locale en el alcance global, también se cambia el locale en el alcance local.

Si desea cambiar el idioma para toda la aplicación, necesita hacerlo a través de la propiedad global de la instancia i18n creada con createI18n.

NOTA

Si no desea heredar locale del alcance global, necesita establecer sync de la opción de componente i18n a false.

Ejemplo:

const i18n = createI18n({
  locale: 'ja', // establecer idioma actual
  // opciones de vue-i18n aquí ...
  // ...
})

// crear instancia de aplicación Vue, instalar Vue I18n y montar!
createApp({
  // opciones de vue aquí ...
  // ...
}).use(i18n).mount('#app')


// cambiar idioma a través de la propiedad `global`

// cuando vue-i18n se usa con legacy: false, observe que i18n.global.locale es una ref, así que debemos establecerla a través de .value:
i18n.global.locale.value = 'en'

// de lo contrario - cuando se usa legacy: true, la establecemos así:
i18n.global.locale = 'en'

AVISO

Cambiar locale del alcance local no afecta locale del alcance global. Esto significa que cambiar el idioma en $i18n.locale en un componente de alcance local no cambiará el idioma de toda la aplicación, solo ese componente. Use $root.$i18n.locale en lugar de $i18n.locale.