Migration vers Vue 3

Migration vers la Composition API à partir de l'API héritée

Résumé

Vue I18n prend en charge les deux styles, à savoir le mode API héritée et le mode API de composition. Le mode API héritée est un style Options API, et le mode API de composition prend en charge l'API de composition Vue qui permet de composer avec des fonctions.

Le mode API héritée est presque compatible avec Vue I18n v8.x hérité, ce qui facilite relativement la migration des applications Vue vers Vue 3. Vue 3 prend en charge le style Options API, donc les applications Vue 2 existantes seront des cas où les applications seront migrées vers Vue 3.

Vue 3 vous permet de créer des applications Vue utilisant un mélange du style Options API et du style Composition API, mais Vue I18n n'a pas permis un mélange de ces styles d'API depuis la sortie initiale v9, donc vous pouvez utiliser soit l'un, soit l'autre style d'API uniquement.

Développer une application Vue avec un mélange de styles Options API et Composition API n'est pas un projet de développement logiciel souhaitable du point de vue de la maintenance. Cela est dû au coût élevé de maintenance de ce type de code. Cependant, il y a des avantages à utiliser les deux styles. En particulier, la migration de style d'API est plus facile à migrer étape par étape, puisqu'elle fonctionne même lorsqu'elle est implémentée dans les deux styles d'API.

À partir de Vue I18n v9.2, le mode API héritée peut également être utilisé avec le mode API de composition.

À propos du support

AVERTISSEMENT

Ce support de migration sera supprimé dans la prochaine version majeure v10. Si votre projet d'application Vue 3 n'a pas encore été migré, veuillez le migrer vers v9 puis le mettre à niveau vers v10.

Limitations

AVERTISSEMENT

Vous devez comprendre qu'il s'agit d'une fonctionnalité limitée pour la migration.

• L'API de composition dans le mode API héritée ne prend pas en charge SSR
• Si vous voulez utiliser correctement l'API de composition Vue I18n (par exemple t) sur le contexte de la fonction setup directement et non pas dans <template>, vous devez appeler via le contexte de rappel nextTick.

Comment effectuer la migration

createI18n

Vous devez spécifier allowComposition: true dans les options createI18n. L'exemple ci-dessous :

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true, // vous devez spécifier cela !
  messages: {
    en: {
      hello: 'hello!'
    },
    zh: {
      hello: '你好！'
    }
  }
})

console.log(i18n.allowComposition) // la sortie est true

useI18n dans un composant Vue

Option setup

<script>
import { defineComponent } from 'vue'
import { useI18n } from 'vue-i18n'

export default defineComponent({
  name: 'Hello',
  setup() {
    const { t } = useI18n() // utiliser dans la portée globale
    return { t }
  }
})
</script>

<template>
  <p>{{ $t('hello') }}</p>
  <p>{{ t('hello') }}</p>
</template>

<script setup>

<script setup>
import { useI18n } from 'vue-i18n'

const { t } = useI18n() // utiliser dans la portée globale
</script>

<template>
  <p>{{ $t('hello') }}</p>
  <p>{{ t('hello') }}</p>
</template>