vue-i18 n,此.$i18n的替代项是否使用合成API?

mxg2im7a  于 2022-12-04  发布在  Vue.js
关注(0)|答案(5)|浏览(332)

我尝试在一个组件中使用composition api实现vue-i18 n。我希望能够在onMounted钩子内设置一些翻译消息。在options api中,我将使用this.$i18n.setLocaleMessage(locale, messages)
但是,this在composition apis Setup()方法中不可用。因此,当我尝试上面的方法时,它给出了undefined。我可以通过将i18 n导入到组件中来实现这一点:import { useI18n } from 'vue-i18n',然后为它创建一个示例var i18n = useI18n({}), i18n.setLocaleMessage(),但我更喜欢像第一个那样的单行解决方案。

u4vypkhs

u4vypkhs1#

只需使用useI18n中的t,如下所示:

const {t} = useI18n({})
//then use in any place in the setup hook
onMounted(()=>console.log(t('someWord'))
z2acfund

z2acfund2#

我在使用带有Vue 2的@vue/composition-api包时遇到了同样的问题。此设置需要vue-i18 n v8.x,它没有useI 18 n composable。
我很幸运地用我自己的useI 18 n函数创建了一个可组合的,它是仿照vue-i18 n的创建者的这个函数创建的:https://github.com/intlify/vue-i18n-composable/blob/master/src/index.ts
他们的解决方案是TypeScript,所以这里有一个翻译后的JavaScript版本,如果它对你有用的话:

/**
 * Adapted from https://github.com/intlify/vue-i18n-composable/tree/master/src
 * This is temporary to allow us to use VueI18n 8.x with the Composition API and Vue 2
 * Once we upgrade to Vue 3 (which allows an upgrade to VueI18n 9.x), we can remove this
 * in favor of VueI18n's useI18n() hook
 */

import { computed, getCurrentInstance } from '@vue/composition-api'
import Vue from 'vue'
import VueI18n from 'vue-i18n'

let i18nInstance = VueI18n

export function createI18n(options) {
  i18nInstance = new VueI18n(options)

  return i18nInstance
}

export function useI18n() {
  if (!i18nInstance) throw new Error('vue-i18n not initialized')

  const i18n = i18nInstance

  const instance = getCurrentInstance()
  const vm = instance?.proxy || instance || new Vue({})

  const locale = computed({
    get() {
      return i18n.locale
    },
    set(v) {
      i18n.locale = v
    }
  })

  return {
    locale,
    t: vm.$t.bind(vm),
    tc: vm.$tc.bind(vm),
    d: vm.$d.bind(vm),
    te: vm.$te.bind(vm),
    n: vm.$n.bind(vm)
  }
}

我将其保存在src/composables/useI18n.js中,并在单个文件组件中使用它,如下所示:

<template>
  <h1>{{ t('translate-me') }}</h1>
</template>

<script>
import { useI18n } from '@/composables/useI18n'

const i18n = {
  messages: {
    en: {
      : 'Finish Arranging Widgets',
    }
  }
}

export default {
  i18n,

  setup() {
    const { t } = useI18n()

    return { t }
  }
}
</script>
ioekq8ef

ioekq8ef3#

在nuxt 2桥上:

<script setup lang="ts">

const { $i18n } = useNuxtApp()
$i18n.t('key')

</script>
cczfrluj

cczfrluj4#

为了扩展Orvis Evans的答案,如果您正在使用带有@nuxtjs/composition-api和Typescript的Nuxt 2,则可以尝试使用这个可组合的

// composables/useI18n.ts

/**
 * Adapted from https://github.com/intlify/vue-i18n-composable/tree/master/src
 * This is temporary to allow us to use VueI18n 8.x with the Composition API and Vue 2
 * Once we upgrade to Vue 3 (which allows an upgrade to VueI18n 9.x), we can remove this
 * in favor of VueI18n's useI18n() hook
 */

import {
    WritableComputedRef,
    computed,
    getCurrentInstance,
} from '@nuxtjs/composition-api'
import Vue, { VueConstructor } from 'vue'
import VueI18n from 'vue-i18n'

export interface Composer {
    locale: WritableComputedRef<string>
    t: typeof VueI18n.prototype.t
    tc: typeof VueI18n.prototype.tc
    te: typeof VueI18n.prototype.te
    d: typeof VueI18n.prototype.d
    n: typeof VueI18n.prototype.n
}

export function useI18n(): Composer {
    const instance: any = getCurrentInstance()
    const vm =
        instance?.proxy ||
        (instance as unknown as InstanceType<VueConstructor>) ||
        new Vue({})

    const i18n = vm.$i18n

    if (!i18n) throw new Error('vue-i18n not initialized')

    const locale = computed({
        get() {
            return i18n.locale
        },
        set(v: string) {
            i18n.locale = v
        },
    })

    return {
        locale,
        t: vm.$t.bind(vm),
        tc: vm.$tc.bind(vm),
        d: vm.$d.bind(vm),
        te: vm.$te.bind(vm),
        n: vm.$n.bind(vm),
    }
}

在单个文件组件中使用它,如下所示

<template>
  <h1>{{ t('translate-me') }}</h1>
</template>

<script>
import { useI18n } from '@/composables/useI18n'

const i18n = {
  messages: {
    en: {
      'translate-me': 'It\'s working!',
    }
  }
}

export default {
  i18n,

  setup() {
    const { t } = useI18n()

    return { t }
  }
}
</script>
3ks5zfa0

3ks5zfa05#

您需要导入useI18n,并在使用之前将下面的内容定义为常量。

import { useI18n } from "vue-i18n";

const {t} = useI18n({})

相关问题