如何通过 nuxt-property-decorator 在 Nuxt.js 应用程序中使用 mixins

Question

我在最新的项目中使用了 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.

谁能给我建议？

Answer 1

mixin 必须用@Component: 修饰：

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

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