在 @Component 中使用 vue mixin

Question

我正在使用 vue-属性-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 钩子以某种方式看到导入的 mixin 的方法？也许以某种方式使用 mixins 扩展 vm？

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
  }
}

在 @Component 中使用 vue mixin

Using vue mixin inside @Component

typescript

vue.js

vue-mixin

vue-property-decorator