vue3里面使用vue-i18n在ts获取切换语言之后的最新值

在Vue 3中使用vue-i18n获取切换语言之后的最新值，需要先安装vue-i18n和@vue/composition-api。

首先，在你的Vue 3项目中，创建一个i18n.ts文件，内容如下：

import { createI18n } from 'vue-i18n'
import { ref, watchEffect } from '@vue/composition-api'
import messages from './locales'

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages,
})

export const useI18n = () => {
  const locale = ref('en')
  watchEffect(() => {
    i18n.locale = locale.value
  })
  const t = i18n.t.bind(i18n)
  return {
    locale,
    t,
  }
}

export default i18n

然后，在你的组件中，使用useI18n()来获取最新的翻译值。例如：

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

<script lang="ts">
import { defineComponent } from 'vue'
import { useI18n } from '@/i18n'

export default defineComponent({
  setup() {
    const { t } = useI18n()

    return {
      t,
    }
  },
})
</script>

在这个例子中，我们通过useI18n()获取最新的翻译值，并将它绑定到组件的t属性上。然后，在模板中使用t属性来显示翻译后的文本。

当你切换语言时，useI18n()会自动更新最新的翻译值，并将它绑定到i18n.locale上，这样你就可以获取最新的翻译值了。