Миграция в Vue 3

Миграция с Legacy API на Composition API

Краткий обзор

Vue I18n поддерживает оба стиля: Legacy API и Composition API. Режим Legacy API соответствует стилю Options API, а режим Composition API поддерживает Vue Composition API, который позволяет компоновать функции.

Режим Legacy API почти совместим с устаревшей версией Vue I18n v8.x, что делает миграцию приложений Vue на Vue 3 относительно простой. Vue 3 поддерживает стиль Options API, поэтому существующие приложения Vue 2 будут случаями, когда приложения будут мигрировать на Vue 3.

Vue 3 позволяет создавать приложения Vue, используя комбинацию стилей Options API и Composition API, но Vue I18n до версии 9 не разрешал использовать оба этих стиля одновременно, поэтому вы можете использовать только один из них.

Создание приложений Vue с комбинацией стилей Options API и Composition API не является желательным проектом разработки ПО с точки зрения обслуживания. Это связано с высокой стоимостью поддержки такого кода. Однако есть преимущества использования обоих стилей. В частности, миграция стиля API проще при пошаговой миграции, так как она работает даже при реализации в обоих стилях API.

Начиная с Vue I18n v9.2 режим Legacy API также можно использовать вместе с режимом Composition API.

О поддержке

УВЕДОМЛЕНИЕ

Поддержка миграции будет удалена в следующей основной версии v10. Если ваш проект приложения Vue 3 еще не был перенесен, пожалуйста, сначала перенесите его на v9, а затем обновитесь до v10.

Ограничения

УВЕДОМЛЕНИЕ

Вы должны понимать, что это ограниченная функция для миграции.

• Composition API в режиме Legacy API не поддерживает SSR
• Если вы хотите правильно использовать Composition API Vue I18n (например t) в контексте функции setup напрямую, а не в <template>, вам нужно вызвать через контекст обратного вызова nextTick.

Как выполнить миграцию

createI18n

Вам нужно указать allowComposition: true в опциях createI18n. Ниже приведен пример:

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true, // вы должны указать это!
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  }
})

console.log(i18n.allowComposition) // вывод будет true

useI18n в компоненте Vue

Опция setup

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

export default defineComponent({
  name: 'Hello',
  setup() {
    const { t } = useI18n() // используется в глобальной области видимости
    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() // используется в глобальной области видимости
</script>

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