typescript - 在@Component 中使用 vue mixin

Question

我正在使用 vue-property-decorator 包，我想在 beforeRouteEnter 钩子中使用 mixin 方法。

我做了什么：

import { Component, Mixins } from 'vue-property-decorator';
import { myMixin } from '../mixins';

@Component({})
export default class myClass extends Mixins(myMixin) {
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.callMixinMethod();
    })
  }
}

这有一个问题，因为to, from，next并且vm不会自动分配它们各自的类型。

所以我需要做的是将 beforeRouteEnter 放入 @Component

@Component({
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.callMixinMethod();
    })
  }
})

这解决了类型的问题，它们是自动拾取的。但这带来了另一个问题。@Component 内部没有定义 mixin 方法。它说

Property 'callMixinMethod' does not exist on type 'Vue'

我试图在 @Component 中注册 mixins，如下所示：

@Component({
  mixins: [myMixin],
  beforeRouteEnter...
})

但这没有帮助。

有什么方法可以让 @Component 中的 beforeRouteEnter 挂钩以某种方式看到导入的 mixins 的方法吗？也许vm以某种方式扩展mixins？

Answer 1

我发现我们可以像这样手动为 vm 分配类型：

@Component({
beforeRouteEnter(to, from, next) {
    next(vm: myClass & myMixin => {
      vm.callMixinMethod();
    })
  }
})
export default class myClass extends Mixins(myMixin) {
}

myMixin 看起来像这样：

@Component({})
export default class myMixin extends Vue {
  public callMixinMethod() {
    // do smth
  }
}