Vue - функция автоматического запуска созданного компонента - PullRequest
1 голос
/ 04 апреля 2019

Я использую Vue CLI 3.x с классами TypeScript (файлы .tsx).

Я хочу реализовать обработку разрешений для всех моих просмотров.

Самый простой сценарий: маршрутизация к компоненту X; имеет разрешение на доступ? остаться; не имеет разрешения? маршрут к странице по умолчанию.

Я уже реализовал логику для правильной обработки всего, но я борюсь за хорошую архитектуру.

На данный момент я добавил свою функцию защищенного обработчика в компонент Vue ViewBase, и все мои компоненты, которые также являются представлениями, наследуют этот класс и вызывают эту функцию в их created() ловушке жизненного цикла. Это выглядит так:

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
class ViewBase extends Vue {
  protected handleAccess() {
    // route here
  }
}

@Component
class MyView extends ViewBase {
  private created() {
    this.handleAccess();
  }
}

Но мне не нравится вызывать что-то в созданном хуке вручную в каждом из моих компонентов. Можно ли как-нибудь автоматизировать это?

1 Ответ

2 голосов
/ 04 апреля 2019

Вы можете использовать Mixins ( TypeScript ).

Определите ваш код доступа к дескриптору в хуке created в mixin напрямую и включите (или расширьте)в TypeScript) этот миксин для всех ваших компонентов представления.Хук будет объединен с вашими компонентами вида, как если бы вы определили хук в компонентах вида.

// mixin.ts
import Vue from 'vue'
import Component from 'vue-class-component'

// You can declare a mixin as the same style as components.
@Component
export default class MyMixin extends Vue {
  created () {
    // handle access code
  }
}


// my-view.ts
import Component, { mixins } from 'vue-class-component'
import MyMixin from './mixin.ts'

@Component
export class MyView extends mixins(MyMixin) {
}
...