Блог

Главная - Вопросы по программированию - Использование vue mixin внутри @Component

Использование vue mixin внутри @Component

#typescript #vue.js #vue-mixin #vue-property-decorator

#typescript #vue.js #vue-микширование #vue-свойство-декоратор

Вопрос:

Я использую пакет vue-property-decorator и хочу использовать метод микширования внутри крючка beforeRouteEnter.

Что я сделал:

 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 не определен. В нем говорится

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

Я попытался зарегистрировать микширование внутри @Component следующим образом:

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

Но это не помогло.

Есть ли какой-нибудь способ заставить beforeRouteEnter подключаться внутри @Component, чтобы каким-то образом видеть методы импортированных миксинов? Может быть, как-то расширить vm с помощью mixins?

Комментарии:

1. Вероятно, вы могли бы перегрузить сигнатуру вызова @Component , увеличив ее. Более простым решением является явный вызов декоратора. export default Component({})(class extends Mixins(myMixin) {...}

Ответ №1:

Я выяснил, что мы можем назначить тип виртуальной машине вручную следующим образом:

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

И мой микширование выглядит следующим образом:

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