컴포넌트 외부에서 VueI18n을 사용하는 데 문제가 있습니다.

컴포넌트 외부에서 VueI18n을 사용하는 데 문제가 있습니다.

컴포넌트 외부에서 i18n을 사용하려고 합니다.이 솔루션 https://github.com/dkfbasel/vuex-i18n/issues/16에서는 Vue.i18n.translate('str')를 사용하도록 지시하고 있습니다만, 이 에러가 발생했을 때, 「Cannot read property 'defined」라는 에러가 발생합니다.

다음 구성을 사용하고 있습니다.

main.discloss.main.discloss.

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

i18n.displaces

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');

누가 나를 도와줄 수 있나요?

컴포넌트 외부에서 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

Import해야 합니다.i18nVue 대신

import i18n from './i18n'

i18n.tc('someMessage')

i18n을 Import하여 VueI18n 외부 컴포넌트를 사용할 수 있습니다.그러면 i18n.global에서 "t"를 사용합니다.

"t"는 "$"가 필요하지 않으며 local을 i18n.global.locale로 변경할 수 있습니다.

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 "$"
};

이런 식으로 작업을 수행했습니다.

import router from '../router';

텍스트 번역:

let translatedMessage = router.app.$t('someMessage');

현재 언어 가져오기:

let language = router.app.$i18n.locale;

언급URL : https://stackoverflow.com/questions/57049471/problem-to-use-vuei18n-outside-a-component