使用vue-i18n与脚本设置和打字稿

发布于 2025-02-13 11:49:22 字数 2169 浏览 1 评论 0原文

编辑：
我无法在＆lt; script设置中引用$ t（键：字符串）的原因是我没有将其声明为变量

var message = computed(() => t(TranslationKeys.Message))

希望与我发现的帖子相同的贫穷灵魂，因为我肯定不知道我在做什么错。下面的原始帖子。

原始：
尝试新的＆lt; script设置/＆gt; VUE3与 typescript 和 vue-i18n 结合使用。我以前曾经使用 i18n 与 vue3 和 coptosing - 式 - 且没有太多麻烦，因此：

<script lang="ts">
import { TranslationKey } from "@/i18n/translationkeys";
import { Vue } from "vue-class-component";

export default class Navbar extends Vue{  
  data() {
      return {
        workAgreement: this.$t(TranslationKey.WorkAgreement),
        documentation: this.$t(TranslationKey.Documentation)
    }
  }
}
</script>

但是，现在，当尝试在脚本标签中使用$ t（）时，它简单地说：

找不到名称'$ t'。

但是在＆lt; template/＆gt;标签中仍然有效。
如上所示，我以前在脚本标签中使用data（）函数来声明/获取变量，但是由于它们已更改了整个数据/设置的方式，因此我很难包装我围绕现在应该如何完成。

为了澄清：在我的组件helloworld.vue中，我有这个工作。

<template>
  <h2>{{ $t(TranslationKeys.Message) }}</h2>
  <v-btn @click="changeLanguage">Change language</v-btn>
</template>

但是，与$ t（）一起编译错误的此，获得“ 无法找到名称'$ t'” - 消息。

<script setup lang='ts'>
import { LanguageType } from '@/resources/languageTypes';
import { TranslationKeys } from '@/resources/translationKeys';
import { useRootStore } from '@/store/root/rootStore';
import { computed } from 'vue';

var message = computed(() => {$t(TranslationKeys.Message)})
var store = useRootStore();

function changeLanguage() {
  store.SetLanguage(store.GetCurrentLanguage == LanguageType.DK ? LanguageType.EN : LanguageType.DK);
}

</script>

我可能会错过文档中某个地方的某些东西，如果是这样，我会提前道歉。

原文

EDIT:
The reason I could not reference $t(key: string) in the <script setup>, is that I had not declared it as a variable like mentioned in the docs and pointed out in a comment by Michal Levý (thanks!).
All I needed to do was add const { t } = useI18n(); and boom! It works, by referencing t like this:

var message = computed(() => t(TranslationKeys.Message))

Hopefully more poor souls with the same issue as me find this post, 'cause I sure didn't know what I was doing wrong.
Original post beneath.

ORIGINAL:
Trying out the new <script setup/> method for Vue3 in conjunction with TypeScript and Vue-I18n.
I have previously used I18n with Vue3 and composition-style, without too much hassle, like this:

<script lang="ts">
import { TranslationKey } from "@/i18n/translationkeys";
import { Vue } from "vue-class-component";

export default class Navbar extends Vue{  
  data() {
      return {
        workAgreement: this.$t(TranslationKey.WorkAgreement),
        documentation: this.$t(TranslationKey.Documentation)
    }
  }
}
</script>

However, now when trying to use $t() within the script tag, it simply says:

Cannot find the name '$t'.

But still works just fine within the <template/> tags.
As shown above I previously used the data() function within the script tag to declare/get variables, but since they've changed how the whole data/setup thing is done, I have a hard time wrapping my head around how it's supposed to be done now.

For clarification:
Within my component HelloWorld.vue I have this, which works fine.

<template>
  <h2>{{ $t(TranslationKeys.Message) }}</h2>
  <v-btn @click="changeLanguage">Change language</v-btn>
</template>

But also this which has compile errors with $t(), getting the "Cannot find the name '$t'"-message.

<script setup lang='ts'>
import { LanguageType } from '@/resources/languageTypes';
import { TranslationKeys } from '@/resources/translationKeys';
import { useRootStore } from '@/store/root/rootStore';
import { computed } from 'vue';

var message = computed(() => {$t(TranslationKeys.Message)})
var store = useRootStore();

function changeLanguage() {
  store.SetLanguage(store.GetCurrentLanguage == LanguageType.DK ? LanguageType.EN : LanguageType.DK);
}

</script>

I might have missed something somewhere in the documentation, and if that's the case I apologize in advance.

分享到QQ

分享到微博