在Vue typescript中使用i18n

Question

在VUE学习TS时出现了这样的问题

我有一个用于呈现菜单的组件，我在其中连接数据

...
import ArrowRoundedDown9x6Svg from '~/svg/arrow-rounded-down-9x6.svg'
import headerNavigation from '~/data/headerNavigation'
@Component({
components: { AppLink, Megamenu, Menu, ArrowRoundedDown9x6Svg }
})
export default class NavLinks extends Vue {
items: INav = headerNavigation
hoveredItem: INavLink | null = null
...

in it I connect data

import headerNavigation from '~/data/headerNavigation'

然而，在这个文件中，我需要连接i18n来切换语言，我不知道怎么做。其中没有构造函数

import { INav } from '~/interfaces/menus/nav'
import { TranslateResult } from 'vue-i18n'   // I create import 
const dataHeaderNavigation: INav = [
{
title: "Home"
url: '/',
}
export default dataHeaderNavigation

相应地，如果我尝试这样做，我会得到一个错误

const dataHeaderNavigation: INav = [
{
title: this.TranslateResult.get("header.links.Home").subscribe(value => { this.Home= value });
^^^
url: '/',
}
Error: Object is possibly 'undefined'.

en.json

{
"header": {
"links": {
"Home": "Home Page"
}
}
}

如何使一个链接到翻译元素正确?

Answer 1

需要添加一个Vue实例

import Vue from 'vue'
import { INav } from '~/interfaces/menus/nav'
const dataHeaderNavigation: (vue: Vue) => INav = vue => [
{
title: vue.$t('header.menu.home'),
url: '/'
}]

还需要检查接口是否允许返回

import {LocaleMessage} from 'vue-i18n'
export interface ILink {
title: string | LocaleMessage;
url?: string;
}