在@Component中使用vue mixin

问题描述

我正在使用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不会自动被分配各自的类型。

所以我需要做的是在RouteEnter之前输入@Component

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

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

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

我试图像这样在@Component内部注册mixins：

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

但这没有帮助。

是否可以通过某种方式使@Component内的beforeRouteEnter钩子以某种方式查看导入的mixins的方法？也许以某种方式用mixins扩展vm？

解决方法

我发现我们可以像这样手动分配类型给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
  }
}