How to use useI18n inside vue3 composition api?

使用 vue-i18n 和 Vue 3 组合 API

在Vue 3中，使用组合API (Composition API) 可以让我们以更灵活的方式构建和组织代码。当涉及到国际化（i18n）时，我们可以使用 vue-i18n 库与组合 API 结合来实现多语言功能。以下是如何在Vue 3组合API中使用 vue-i18n 的步骤和示例。

步骤 1: 安装 vue-i18n

首先，确保已经安装了 vue-i18n。如果还未安装，可以通过npm或yarn来安装：

bash
npm install vue-i18n@next
# 或者
yarn add vue-i18n@next

步骤 2: 配置 i18n 实例

创建一个i18n实例，并定义你的翻译字典。例如，创建一个 i18n.js 文件：

javascript
import { createI18n } from 'vue-i18n';

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  zh: {
    message: {
      hello: '你好，世界'
    }
  }
};

const i18n = createI18n({
  locale: 'en', // 设置默认语言
  fallbackLocale: 'en', // 设置备用语言
  messages, // 设置翻译字典
});

export default i18n;

步骤 3: 在 Vue 应用中使用 i18n

在 main.js (或类似的入口文件) 中引入 i18n 实例并作为插件使用：

javascript
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';

const app = createApp(App);
app.use(i18n);
app.mount('#app');

步骤 4: 在组件中使用 useI18n

在 Vue 3 组件中，可以使用 useI18n 函数来接入 i18n 功能。这里是一个组件的示例：

vue
<template>
  <div>
    {{ t('message.hello') }}
  </div>
</template>

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

const { t } = useI18n({
  inheritLocale: true, // 继承全局 locale 配置
  useScope: 'local' // 可选 'local' | 'parent' | 'global'
});

</script>

在这个例子中，useI18n 函数提供了 t 方法，用于翻译键路径。我们在模板中调用 t('message.hello') 来显示当前语言的 "hello" 消息。

总结

通过上述步骤，可以在 Vue 3 中以组合 API 的方式使用 vue-i18n 实现多语言功能。这种方式提供了更大的灵活性和更清晰的代码结构，使得国际化变得更简单。