Vue js和fabric js逻辑答案

【问题标题】：Vue js and fabric js logicVue js和fabric js逻辑
【发布时间】：2018-11-21 12:05:08
【问题描述】：

我正在使用 Vue.js，我的组件之一是 2D 画布编辑器（通过使用 fabric.js 库）。

问题是，这个编辑器的代码和我在其中进行的操作变得非常冗长，成为组件脚本标签的一部分。

我尝试使用 mixins 并将代码分成单独的 mixins，例如 canvasMoving、copyPaste、grouping。

虽然这可行，但我觉得这仍然不是要走的路，也许我应该使用专门的课程。我也相信 mixin 是当你有一个功能可以在多个组件之间共享时。

因为例如 copyPaste mixin，有时需要包含在 mixin grouping 中的方法。这对我来说真的很不对劲，因为组件包含这两个 mixin，它可以正常工作，但如果我删除其中一个，它将停止工作。

所有这些 mixin 都适用于画布，但画布仅在其中一个中初始化，并且他们可以再次访问它，因为组件包含所有 mixin，但如果我删除初始化画布的 mixin ，它们都停止工作，因为this.canvas 将是未定义的。

这里的正确方法是什么？我正在考虑使用依赖注入的类，比如拥有主类让我们说Editor，它会有它的依赖项（分组、复制粘贴、绘图）或类似的东西。

那么我唯一不知道的是如何将我的单独类与 Vue.js 组件连接起来。把大师班放在我组件的data对象中？

【问题讨论】：

【解决方案1】：

所以最后我通过使用普通类而不是 mixins 解决了这个问题。我还使用bottlejs 进行依赖注入。

现在每个类在其构造函数中都指定了它需要使用的其他类，因此可以立即清楚它依赖于哪些类。

同样之前当一个mixin需要调用另一个mixin的方法时，它是一个简单的this.methodName()调用，不知道这个方法的位置，而现在this._otherClass.methodName()已经明确说明了

因为我需要访问画布、存储以及发出事件，所以我创建了编辑器类，它有一个方法init(canvas, store, eventBus)，因为我只能在显示 HTML 画布之后创建 Fabric 画布。 Bottle 使用空字段创建此类，我在组件的挂载阶段使用参数调用 init 函数。

然后，我的所有类都是 EditorProvider 类的祖先，该类只有一个用于此 Editor 类的 getter（它在构造函数中获取并存储在字段中），我可以从中获取任何指定的字段。因此，在我的任何类中存储的调用如下所示：

this.editor.store.commit('anything')

调用画布：

this.editor.canvas.renderAll()

调用事件总线：

this.editor.eventBus.emit('eventName')

我的组件现在只导入了 bottlejs 并可以通过名称访问所有类。交互主要是通过画布和窗口事件，所以我在事件中创建了一个 EventHandler 类，它将所有这些事件侦听器从组件移动到单独的类。所以最后在组件中我只有 HTML 模板和几行导入和脚本标签，现在可读性更高，依赖关系清晰可见。

【讨论】：