Vue – 自动运行组件创建功能

Question

我正在使用 Vue CLI 3.x 和 TypeScript classes（.tsx 文件）。

我想对我的所有视图实施权限处理。

最简单的场景是：路由到组件 X；有访问权限？停留;没有权限？路由到默认页面。

我已经实现了正确处理一切的逻辑，但我正在努力寻找一个好的架构。

现在我将受保护的处理函数添加到 Vue 组件 ViewBase，我所有的组件也是视图，继承这个 class 并在它们的 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();
  }
}

但我不喜欢在我的每个组件中手动调用已创建的挂钩中的某些内容。我能以某种方式使它自动化吗？

Answer 1

您可以使用 Mixins (TypeScript).

直接在 mixin 的 created 挂钩中定义句柄访问代码，并为所有视图组件包含（或在 TypeScript 中扩展）此 mixin。该钩子将合并到您的视图组件中，就像您在视图组件中定义钩子一样。

// 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) {
}

Vue – 自动运行组件创建功能

Vue – Auto run function on component created

lifecycle

inheritance

vue.js

vue-class-components

Vue – 自动 运行 组件创建功能

Vue – Auto run function on component created

lifecycle

inheritance

vue.js

vue-class-components

Vue – 自动运行组件创建功能