Nuxtjs 使用 typescript 在使用 meta 时有问题答案

【问题标题】：Nuxtjs using typescript has problem with using metaNuxtjs 使用 typescript 在使用 meta 时有问题
【发布时间】：2019-07-24 12:19:22
【问题描述】：

在 Nuxtjs 中，我放置了页面的权限密钥，以便我可以检查用户在中间件中的访问权限。当我的脚本语言是 js 时，一切都像一个魅力，但是，在 lagn="ts" 的情况下，我会遇到错误。

我已经寻找解决方案并使用 vue-meta 包，但我最终得到了同样的错误。

<script lang="ts">
export default {
  meta: {
    authorization: ['Organization/List']
  },
  data() {
    return {
           text: this.$t('organization.title'),
    }
   }
}

在这种情况下，我会遇到以下错误：“类型 '{ meta: { authorization: string[]; }; data(): any; }' 上不存在属性 '$t'。”

我不知道使用元变量和全局变量有什么问题。

【问题讨论】：

标签： typescript meta nuxt.js

【解决方案1】：

您可以通过使用 nuxt-property-decorator 来实现这指的是 head 属性我不确定这是否适合您对插件 vue-meta 的需要，但您可以参考下面给出的关于创建装饰器以设置 vue-meta 包的链接

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';

@Component({
  layout: 'home',
  head() {
    return {
      title: 'Test Title',
      meta: [
        { hid: 'description', name: 'description', content: 'My custom description' }
      ]
    }
  }
})
export default class MainPage extends Vue {

}
</script>

或创建您自己的装饰器，以便您可以在类中定义它

@元

https://github.com/nuxt/vue-meta/issues/181#issuecomment-390258209

@2019 年 1 月 9 日更新

您可以使用extendRoutes，这不是可取的，但仍然有效:)

创建 permissions.js 并在其中，它看起来像这样

export const normalUser = [
  'route-name-invoices',
  'route-name-invoices-create'
];

在你的 nuxt.config.js - 导入你的权限 js

import { normalUser } from './permissions'

...
// find the router or you can define it
router: {
  extendRoutes(routes) {
    return routes.map(route => {
      if (normalUser.includes(route.name)) {
        route.meta = { authorization: ['Organization/list'] };
      }
      return route;
    });
  }
}

【讨论】：

可以在不使用装饰器的情况下设置元数据。顺便说一句，无论有没有装饰器，我都无法在中间件中获取元属性，如下所示：route.meta.forEach(item => { if (item.authorization && typeof item.authorization !== undefined) { } })
好吧，我认为您指的是路由器元数据。在这种情况下，您可以使用 extendRoutes 但此解决方案可能很长，但对于 this.$t 来说已经足够了。您必须将其注入 vue 实例 link 或使用 ts ignore [code]// @ts-ignore [/代码] 上面 this.$t
是的，我的意思是这样的：(router.vuejs.org/guide/advanced/meta.html)。但是，在 Nuxt 中，路由将根据文件夹约定生成。在没有 ts 的 Nuxt 中，这个元可以毫无问题地添加到组件中，但是当我使用 ts 时会出现问题：

【解决方案2】：

通过使用<type="ts">，我们正在调用 TypeScript 类型检查。现在让我们分解代码，看看为什么错误是合法的。

const obj = {
  meta: {
    authorization: ['Organization/List']
  },
  data() {
    return {
           text: this.$t('organization.title'),
    }
   }
};

export default obj;

现在，在data 方法中，this 引用对象obj，我们引用this 的obj 的属性$t。显然没有这样的属性。

【讨论】：

我明白你在说什么。但是，我猜 Vue 与 ts 一起工作有点复杂。因为没有“元”它可以工作。此外，$t 是 i18n 的一个函数，因为它是注入的，所以在整个项目中都是众所周知的。
你是说{data() { return this.$t(''); }}不是类型检查错误？
不，不是。请参考 vuejs 和 typescript 文档，你会看到它的工作原理。事实上，在我的问题中，meta 有问题不是 this.$t

【解决方案3】：

好像最近在route中添加了meta key的定义： https://github.com/nuxt/typescript/pull/89

【讨论】：