如何在带有 nuxt-属性-decortor 的 Nuxt.js 应用中使用 mixins

How to use mixins in Nuxt.js app with nuxt-property-decortor

我在最近的项目中使用了Nuxt.js,语言是TypeScript。 另外,我正在使用 nuxt-property-decorator。 我试图理解以下代码中的 'mixins' 属性。

mixins.vue↓

<template>
  <div>    
    <p>{{hello}}</p>
  </div>   
</template>

<script lang="ts">
import { Component ,Vue } from 'nuxt-property-decorator'
import Mixin from "~/mixins/mixin";
@Component({
    mixins:[
        Mixin
    ]
})
export default class extends Vue{
    greeting:string = 'Hello'
}
</script>

mixin.ts↓

import { Vue } from "nuxt-property-decorator";
export default class extends Vue {
    greeting:string = ''
    message:string = 'world'
    get hello(){
        return this.greeting + ' ' + this.message + '!'
    }
}

我期望输出中有 "Hello worlds!",但发生错误:

Property or method "hello" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

谁能告诉我吗?

mixin 必须用 @Component:

修饰
// mixin.ts
import { Component, Vue } from "nuxt-property-decorator";

@Component 
export default class extends Vue {
  //...
}