在组件外部使用VueI18n存在问题

Question

我试图在组件之外使用i18n --我找到了这个解决方案-- https://github.com/dkfbasel/vuex-i18n/issues/16告诉它使用Vue.i18n.translate('str')，但是当我调用它时，一个错误不能读取未定义的属性的“转换”。

我使用以下配置

main.js

import i18n from './i18n/i18n';
new Vue({
    router,
    store,
    i18n: i18n,
    render: h => h(App)
}).$mount('#app')

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import i18nData from './i18nData'
Vue.use(VueI18n);
export default new VueI18n({
  locale: 'en',
  messages: i18nData,
});

i18nData.js

export default {
    en: {
        //my messages
    }
}

然后我试着用这个

import Vue from 'vue';
Vue.i18n.translate('someMessage');

有谁可以帮我？

Answer 1

若要使用使用Vue 3的组合API，但在组件的setup()之外，则在其属性上使用你可以访问的转换API (例如t函数)。

例如，在具有单元可测试合成功能的文件中：

// i18n/index.js

import { createI18n } from 'vue-i18n'
import en from './en.json'

  ...

export default createI18n({
  datetimeFormats: {en: {...}},
  locale: 'en',
  messages: { en }
})

// features/utils.js

//import { useI18n } from 'vue-i18n'
//const { t } = useI18n() // Uncaught SyntaxError: Must be called at the top of a `setup` function

import i18n from '../i18n'

const { t } = i18n.global

Answer 2

您应该导入i18n而不是Vue

import i18n from './i18n'

i18n.tc('someMessage')

Answer 3

您可以通过导入VueI18n外部组件来导入i18n，然后从i18n.global中使用"t“。

"t“不需要"$”，您可以用更改语言环境

import i18n from '../i18n';

const { t } = i18n.global;

i18n.global.locale = 'en-US'; // Change "Locale"

const data = { 
  name: t('name'), // "t" doesn't need "$"
  description: t('description'), // "t" doesn't need "$"
};