Vue.js 创建一个辅助类来全局调用你的方法

Question

我刚刚用 Vue.js 开始了我的第一个项目，我已经设法做了很多基本的事情，现在我正在尝试构建项目。我想实现尽可能高的代码重用。我的应用程序最常见的情况之一是显示不同类型的消息，confirmation、information 等。出于这个原因，我想创建一种机制允许我在全局范围内发布这些消息，无论我在哪里调用它们。

就我所能取得的进展而言，我选择了以下变体:

1- 我在我的 src 目录中创建了一个名为 classes 的目录。

2- 我在 classes 目录中创建了一个名为 MessageBox.js 的文件，其内容如下:

import Vue from 'vue';

export default class MessageBox extends Vue {
  confirm() {
    return alert('Confirm');
  }

  information() {
    return alert('Information');
  }
}

我这样定义是因为我想全局调用这些方法如下:

MessageBox.confirm();

我真的是 Vue.js 的新手，我想知道是否有任何其他方法可以更有效地实现我正在寻找的结果......或者..也许更优雅？

非常感谢您..

Answer 1

至少有两种方法可以解决这个问题:

事件总线

依靠 Vue.js 内部结构来创建一个简单的 EventBus。这是 Vue.js 中使用的设计模式。

创建一个文件并向其中添加以下行

import Vue from 'vue';
const EventBus = new Vue();
export default EventBus;

创建负责显示全局对话框的组件。这通常在树的顶部注册，因此它可以覆盖整个房地产。

导入事件总线import EventBus from 'event_bus' 然后注册新事件

EventBus.$on('SHOW_CONFIRM', (data) => {
 // business logic regarding confirm dialog
})

现在你可以将它导入到任何想要像这样触发事件的组件中

EventBus.$emit('SHOW_CONFIRM', confirmData);

Vuex

您还可以使用 vuex存储有关对话框的全局数据并添加 mutations触发对话框的显示。

同样，您应该定义一个负责显示的组件并将其推向可视化树的顶部。

注意:在这两种情况下，您都应该处理需要同时显示多个对话框的情况。通常在显示组件中使用队列是可行的。