Question

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

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

我尝试使用mixin，并将代码分为git stash git pull git stash pop，canvasMoving，copyPaste等单独的mixin。

现在，尽管这行得通，但我觉得这仍然不是要走的路，也许我应该使用专门的类。当您具有在多个组件之间共享的功能时，我也相信mixin。

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

所有这些mixin都可以在画布上使用，但是画布只能在其中一个中初始化，并且它们可以再次访问它，因为该组件包括所有mixins，但是如果我删除了初始化画布的mixin ，它们都将停止工作，因为grouping将不确定。

这里正确的方法是什么？我正在考虑使用依赖项注入的类，例如让主类说this.canvas，它将具有其依赖项（分组，copyPaste，绘图）或类似的东西。

然后我唯一不知道的是如何将单独的类与Vue.js组件连接。将主类放在组件的Editor对象中？

Answer 1

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

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

同样，在一个混合需要调用其他混合的方法之前，它是一个简单的this.methodName()调用，不知道此方法的位置，而现在this._otherClass.methodName()显然已经说明了

由于我需要访问画布，存储并发出事件，因此我创建了类编辑器，该类具有方法init(canvas, store, eventBus)，因为在显示HTML画布之后，我只能创建Fabric画布。 Bottle用空字段创建了此类，我在组件的安装阶段使用参数调用了init函数。

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

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

调用画布：

this.editor.canvas.renderAll()

调用eventbus：

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

我的组件现在仅导入bottlejs，并可以通过其名称访问所有类。交互主要是通过canvas和window事件进行的，因此我创建了一个EventHandler类，该事件将所有这些事件侦听器从组件移到单独的类。因此，最后，在该组件中，我只有HTML模板，几行导入和script标签，这些标签现在更具可读性，并且依存关系清晰可见。

Vue JS和Fabric JS逻辑

1 个答案: