vue3 怎么全局混入使用i18n

Vue 3 中全局混入（mixins）来使用 i18n 可以让你在项目的各个组件之间共享国际化配置，减少代码复制。首先，你需要安装 `vue-i18n` 包。以下是全局混入 i18n 的步骤：

1. 安装依赖：

   npm install vue-i18n

2. 创建 `i18n.js` 或者 `i18n.ts` 文件作为混入文件：

   // i18n.js
   import Vue from 'vue'
   import { createI18n } from 'vue-i18n'

   const i18n = createI18n({
     locale: 'en', // 默认语言
     fallbackLocale: 'en', // 当检测到的语言不可用时的备用语言
     messages: {
       en: require('./locales/en.json'), // 其他语言文件
       zh: require('./locales/zh.json') //...
     }
   })

   export default function useI18n() {
     return i18n
   }

   // 或者 TypeScript
   import { createI18n } from 'vue-i18n'
   import { defineComponent } from 'vue'

   export default defineComponent({
     setup() {
       const i18n = createI18n({ ... }) // 类似 JavaScript 部分
       return { i18n }
     }
   })

3. 在需要使用 i18n 的地方引入并使用这个混入：

   // 在其他组件中
   import { ref, onMounted } from 'vue'
   import { useI18n } from './path/to/i18n.js'

   export default {
     setup() {
       const i18n = useI18n()
       
       onMounted(() => {
         // 设置当前语言或其他初始化操作
         i18n.locale = 'zh' // 示例：切换至中文
       });

       // 使用翻译功能
       const translatedText = ref(i18n.t('yourKey')) // 翻译文本

       return { translatedText }
     }
   }