typescript - Vue：定义属性/数据时，mixin的属性/数据不可用

Question

我有一个存储信息的 vue mixin（world在下面的示例中），我想在几个 vue 组件中访问，而不是每次都显式导入它。

这是示例：

<template>
  <ol>
    <li>Hello {{ world }}</li>
    <li>{{ greeting }}</li>
    <li>{{ greeting2 }}</li>
  </ol>
</template>

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

@Component
class MyMixin extends Vue {
  world = 'world'
}

@Component
export default class Home extends Mixins(Vue, MyMixin) {
  greeting = 'Hello ' + this.world
  greeting2 = ''

  created() {
    this.greeting2 = 'Hello ' + this.world
  }
}
</script>

页面显示：

1. Hello world
2. Hello undefined
3. Hello world

为什么第二个不起作用？这是设计使然吗？有什么比 3. 更好的规避方法吗？

Answer 1

这与 mixins 无关，这是类的设计，一个属性在声明中不知道另一个，但您可以定义greeting为计算属性：

@Component
export default class Home extends Mixins(Vue, MyMixin) {

   greeting2 = ''
   
   get greeting (){
      return 'Hello ' + this.world
    }
  created() {
    this.greeting2 = 'Hello ' + this.world
  }
}