Vue 3 中的迁移

从传统 API 迁移到组合 API

概要

Vue I18n 支持两种样式：传统 API 模式和组合 API 模式。传统 API 模式是选项 API 样式，而组合 API 模式支持 Vue 组合 API，可以使用函数进行组合。

传统 API 模式与旧版 Vue I18n v8.x 几乎兼容，使得将 Vue 应用程序迁移到 Vue 3 相对容易。Vue 3 支持选项 API 样式，因此现有的 Vue 2 应用程序将是迁移到 Vue 3 的情况。

Vue 3 允许你混合使用选项 API 样式和组合 API 样式来创建 Vue 应用程序，但从 v9 初始发布以来，Vue I18n 一直不允许混合使用这些 API 样式，因此你只能使用其中一种 API 样式。

从维护角度来看，开发同时使用选项 API 样式和组合 API 样式的 Vue 应用程序并不是理想的软件开发项目。这是因为维护此类代码的成本很高。然而，使用两种样式都有优势。特别是，API 样式迁移更容易逐步迁移，因为即使在两种 API 样式中实现也能正常工作。

从 Vue I18n v9.2 开始，传统 API 模式也可以与组合 API 模式一起使用。

关于支持

注意

这种迁移支持将在下一个主版本 v10 中被移除。如果你的 Vue 3 应用程序项目尚未迁移，请先迁移到 v9，然后再升级到 v10。

限制

注意

你应该将其理解为用于迁移的有限功能。

• 传统 API 模式下的组合 API 不支持 SSR
• 如果你想在 setup 函数上下文中直接正确使用 Vue I18n 组合 API (例如 t)，你需要通过 nextTick 回调上下文调用。

如何迁移

createI18n

你需要在 createI18n 选项中指定 allowComposition: true。下面的例子：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'en',
  allowComposition: true, // 你需要指定这个！
  messages: {
    en: {
      hello: 'hello!'
    },
    ja: {
      hello: 'こんにちは！'
    }
  }
})

console.log(i18n.allowComposition) // 输出为 true

Vue 组件中的 useI18n

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>