在VueJs中如何更正确地制作Helper？

Question

我有一些生成随机六色颜色的方法。它将在项目的极少数（3或5）部分中使用。因此，我想将其与主代码分离为某种Helper或其他形式，并在需要时将其包括在内（不是全局的）。

我有2种工作方法可以做到这一点：

• 使用mixins。我不喜欢的是，当您阅读代码时，无法将自己的方法与混合方法分开。
• 使用插件。我不喜欢的是，您每次必须在要使用它的所有文件中都写import Vue from 'vue' + Vue.use(MyPlugin)。之后，您可以像这样调用它。$ ColorHelper.getRandomHEX（）。

因此，问题在于美学可视化。 做这些事情的最佳实践是什么？

PS：项目是使用Webpack从模板创建的。

Answer 1

我们的团队决定从文件助手中导入使用功能 例如：

import { getRandomColor, getBackgroundColor } from 'Global/helpers/colorHelper';
// .....
let color = getRandomColor();

有什么好处：

• 不需要使用多余的导入+可以在插件中使用
• 方法在视觉上引人注目，而this则不然

糟糕的是：

• 不能直观地看到助手的方法。但是可以用别名解决。我们还没有想到

Answer 2

Vue插件是全局的，您只需调用一次Vue.use方法即可。然后它们应该在您使用该特定Vue实例的任何地方工作。

在默认项目设置中，您通常没有多个Vue实例，因此它应该在全局范围内工作。

从文档中

  

插件通常向Vue添加全局级别的功能。

并且：

  

通过调用Vue.use（）全局方法来使用插件：

Vue.use(MyPlugin)

https://vuejs.org/v2/guide/plugins.html