vue.js 获取子组件中的当前区域设置

ulydmbyx  于 2022-11-17  发布在  Vue.js
关注(0)|答案(2)|浏览(165)

我无法从子组件的vue-i18 n中获取locale参数。
我已经在cli ui中安装了vue-i18 n。使用$t(“message”)的翻译工作正常,但当我尝试访问i18n.locale时出现错误
我的输入点(main.js)

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import i18n from './i18n'

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

我的子组件

<template>
    <div>{{ $t("message") }}</div>
</template>
<script>
import {HTTP} from '@/http-common'

export default 
{
  name : 'c1',
  methods:{
      selectMap()
      {
          console.log(i18n.locale);//=> doesn't work
      }
}
</script>

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key)
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})
qzwqbdag

qzwqbdag1#

尝试this.$i18n.locale,或者如果在<template>内,则仅尝试$i18n.locale

ego6inou

ego6inou2#

对于Composition API,这是我的解决方案:

<script setup>

    import { useI18n } from "vue-i18n";
    
    const i18nLocale = useI18n();
    
    console.log(i18nLocale.locale.value); // "en"

</script>

相关问题