vue.js - 如何更正确地在 VueJs 中制作 Helper？

Question

我有一些方法可以生成随机的十六进制颜色。它将在项目的极少数（3 或 5）部分中使用。所以我想把它从主代码中分离成某种 Helper 或其他的东西，并在需要时包含它（不是全局的）。

我有两种工作方式来做到这一点：

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

所以，问题是关于美学可视化的。做这些事情的最佳做法是什么？

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

标签： vue.js

Answer 1

我们的团队决定使用从 files-helpers 导入的函数 例如：

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

有什么好处：

• 不需要在插件中使用多余的导入 + 使用
• 方法在视觉上脱颖而出，它不是来自什么this

什么不好：

• 无法直观地看到助手有什么方法。但可能可以用别名修复。我们还没有想到