我尝试在一个组件中使用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()
,但我更喜欢像第一个那样的单行解决方案。
5条答案
按热度按时间u4vypkhs1#
只需使用
useI18n
中的t
,如下所示: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版本,如果它对你有用的话:
我将其保存在
src/composables/useI18n.js
中,并在单个文件组件中使用它,如下所示:ioekq8ef3#
在nuxt 2桥上:
cczfrluj4#
为了扩展Orvis Evans的答案,如果您正在使用带有@nuxtjs/composition-api和Typescript的Nuxt 2,则可以尝试使用这个可组合的
在单个文件组件中使用它,如下所示
3ks5zfa05#
您需要导入useI18n,并在使用之前将下面的内容定义为常量。