Vue 3 vue-i18 n.如何在应用程序外使用$t(t)(.vue文件)?合成API

eqqqjvef  于 2023-01-09  发布在  Vue.js
关注(0)|答案(3)|浏览(632)

我想在组件外格式化我的日期时间。

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

我试图从App示例中获取$t,但它只在组件的上下文中工作,就像useI 18 n一样。

import { getCurrentInstance } from 'vue'

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

ocebsuys1#

我找到了一个解决方案。只需将您的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')
wydwbb8l

wydwbb8l2#

尝试使用vue-i18n中的useI18n可组合函数来获得t方法,而不是$t

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

xcitsw883#

我认为你的方法也应该是可组合的,这样你就可以简单地在里面使用方法useI18n()。
就像
use-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>

这样,您甚至可以将其他转换方法添加到同一个组合

相关问题