在 @Component 中使用 vue mixin答案

【问题标题】：Using vue mixin inside @Component在 @Component 中使用 vue mixin
【发布时间】：2020-12-31 06:06:18
【问题描述】：

我正在使用 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 的方法吗？也许以某种方式使用 mixins 扩展 vm？

【问题讨论】：

您可以通过扩充 @Component 的调用签名来重载它。更简单的解决方案是显式调用装饰器。 export default Component({})(class extends Mixins(myMixin) {...}

标签： typescript vue.js vue-mixin vue-property-decorator

【解决方案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
  }
}

【讨论】：