Question

我刚刚从Vue.js开始了我的第一个项目，我已经做了很多基本的事情，现在我正在尝试构建项目。我想实现尽可能多的代码重用。我的应用程序最常见的情况之一是显示不同类型的消息，confirmation，information等。因此，我想创建一种机制来允许我启动这些消息不管我在哪里称呼他们。

据我所知，我选择了以下变体：

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

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

import Vue from 'vue';

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

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

之所以这样定义，是因为我想按如下方式全局调用这些方法：

MessageBox.confirm();

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

非常感谢您。

Answer 1

这是现代JavaScript中的一种反模式，用于将不依赖类实例的辅助函数合并到类中。模块扮演名称空间的角色。

Helper函数可以按如下定义：

messageBox.js

ul

它们可以导入并用于组件方法。如果需要在模板中使用它们，可以将它们一个接一个地分配给需要的方法：

Some.vue

li

或一次全部：

export function confirm() {
  return alert('Confirm');
}

也可以使助手作为Vue mixins可重用：

messageBox.js

import { confirm } from './util/messageBox';

export default {
  methods: { confirm }
}

并按每个组件使用

Some.vue

import * as messageBox from './util/messageBox';

export default {
  methods: { ...messageBox }
}

或全局（不建议使用，因为这会带来与使用全局变量相同的维护问题）：

...
export const confirmMixin = {
  methods: { confirm };
}

export default {
  methods: { confirm, information };
}

Answer 2

至少有两种方法可以解决此问题：

事件总线

依靠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来触发对话框的显示。

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

注意：在两种情况下，您都应处理需要同时显示多个对话框的情况。通常在显示组件内部使用队列即可。

Vue.js创建一个帮助程序类以全局调用您的方法

2 个答案:

事件总线

Vuex