Vue 3 vue-國際化。 如何在應用程序（.vue 文件）之外使用 $t(t)？ 作文 API

Question

我想在組件外格式化我的日期時間。

function transformDatetime(config, value) {
    if (value) {
        return $d(new Date(value), config);
    }
    return $t('-');
}

我正在嘗試從 App 實例中獲取 $t。 但它只在組件的上下文中起作用，就像 useI18n 一樣。

import { getCurrentInstance } from 'vue'

export default function useGlobal() {
    const instance = getCurrentInstance()
    if (!instance) return
    return instance.appContext.config.globalProperties
}

Answer 1

我找到了解決辦法。 只需將您的i18n導入應用程序外部的文件並use i18n.global.t

import { createI18n } from "vue-i18n"

export const i18n = createI18n({
    legacy: false,
    locale: 'ja',
    fallbackLocale: 'en',
    messages,
})

import { i18n } from '@/i18n'

const { t: $t, d: $d, n: $n } = i18n.global

const expample = $t('some-text')

Answer 2

嘗試使用vue-i18n中的useI18n可組合項 function 來獲取t方法而不是$t ：

<script setup>
   import { useI18n } from 'vue-i18n'
   const { t } = useI18n()
   console.log(t('greeting'))
</script>

Answer 3

我認為你的方法也應該是可組合的，所以你可以簡單地使用里面的方法 useI18n() 。

就像是

使用-transform-datetime.ts

import { useI18n } from 'vue-i18n'

export const useTransformDatetime = () => {
  const { t } = useI18n()

  const transformDatetime = (config, value) => {
    if (value) {
      return $d(new Date(value), config)
    }
    return t('-')
  }

  return {
    transformDatetime
  }
}

然后只需在需要它的 vue 文件中使用它

<script setup>
   import { useTransformDatetime } from 'path-to-your-composables/use-transform-datetime'
   const { transformDatetime } = useTransformDatetime()
   console.log(transformDatetime(config, 'value'))
</script>

這樣，您甚至可以在同一個可組合項中添加其他轉換方法