i18n 在vue3中的setup中怎么使用

i18n（Internationalization，国际化）在 Vue 3 中通常通过第三方库如 vue-i18n 实现。在 setup 钩子函数中使用它的一般步骤如下：

1. 安装依赖：首先安装 `vue-i18n` 和相关的插件，例如 `@vue/composition-api` 或者直接引入 `setup` 函数。

   npm install vue-i18n @vue/composition-api

2. 引入并配置库：在 `main.js` 或全局文件中初始化 i18n 并设置语言环境。

   import { createI18n } from 'vue-i18n'
   const i18n = createI18n({
     locale: 'zh', // 默认语言
     fallbackLocale: 'en',
     messages: {
       en: require('./locales/en.json'),
       zh: require('./locales/zh.json')
       // 其他支持的语言...
     }
   })
   // 如果使用 composition API
   import { useRuntimeConfig } from '@vue/composition-api'
   export default createApp({
     setup() {
       const config = useRuntimeConfig()
       config.i18n = i18n
       return {}
     },
     provide() {
       return { $i18n: i18n }
     }
   }).use(i18n)

3. 在组件中访问国际化资源：在 setup 函数内部或模板中使用 `t` 函数来获取翻译文本。

   import { computed, ref } from 'vue'

   setup() {
     const currentLang = ref('zh') // 可以根据需求动态切换语言

     const translatedMessage = computed(() => {
       return i18n.t(`greeting.${currentLang.value}`)
     })

     return {
       translatedMessage,
       langChange(newLanguage) {
         currentLang.value = newLanguage
       }
     }
   }

   <!-- 使用模板 -->
   <template>
     <div>{{ translatedMessage }}</div>
     <button @click="langChange('en')">切换到英文</button>
   </template>