Vue JS и Fabric JS логика

Question

Я использую Vue.js, и одним из моих компонентов является редактор 2D-холста (с использованием библиотеки fabric.js).

Дело в том, что код для этого редактора и для операций, которыми я являюсьв нем становится довольно многословно быть частью тега скрипта компонента.

Я пытался использовать миксины и разделил код на отдельные миксины, такие как canvasMoving, copyPaste, grouping.

Теперь, когда это работает, я чувствую, что это еще не тот путь, который, возможно, мне следует использовать специализированные классы.Также я верю, что миксин - это когда у вас есть функциональность, которую можно разделить между несколькими компонентами.

Так как, например, для copyPaste mixin иногда нужны методы, которые содержатся в mixin grouping.Тогда мне кажется, что это неправильно, так как компонент включает оба этих миксина, он работает нормально, но если я удалю один из них, он перестанет работать.

Более того, все эти миксины работают схолст, но холст инициализируется только в одном из них, и снова они могут получить к нему доступ, потому что компонент включает все миксины, но если я удаляю миксин, который инициализирует холст, все они перестают работать, потому что this.canvas будетundefined.

Какой правильный подход здесь?Я думал о классах с внедрением зависимостей, например, если мастер-класс скажет Editor, и у него будут свои зависимости (группировка, copyPaste, рисование) или что-то в этом роде.

Тогда единственное, чего я не знаюэто как соединить мои отдельные классы с компонентом Vue.js.Поместить мастер класс в data объект моего компонента?

Answer 1

Итак, в конце концов, я решил это, используя обычные классы вместо миксинов.Я также использовал bottlejs для внедрения зависимостей.

Теперь каждый класс в своем конструкторе указывает другие классы, которые ему нужно использовать, поэтому сразу становится ясно, от каких классов он зависит.

Также раньше, когда одному миксину требовалось вызывать метод другого миксина, это был простой вызов this.methodName(), не зная, где находится этот метод, тогда как теперь это четко указано this._otherClass.methodName()

Поскольку мне требовался доступ к холсту, хранилищу, а также для генерации событий, я создал класс Editor, у которого есть метод init(canvas, store, eventBus), поскольку я могу создавать холст Fabric только после отображения холста HTML.Bottle создает этот класс с пустыми полями, и я вызываю функцию init с параметрами на этапе монтирования моего компонента.

Все мои классы являются потомками класса EditorProvider, который имеет только один метод получения для этого класса Editor (что он попадает в конструктор и сохраняет в поле), откуда я могу получить любое из указанных полей.Поэтому вызов для сохранения в любом из моих классов выглядит следующим образом:

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

Вызов на холст:

this.editor.canvas.renderAll()

Вызов на шину событий:

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

Мой компоненттеперь просто импортирует bottlejs и имеет доступ ко всем классам по их именам.Взаимодействие происходит главным образом с событиями canvas и window, поэтому я создал событие EventHandler, который перемещает все эти прослушиватели событий из компонента в отдельный класс.В итоге в компоненте у меня есть только HTML-шаблон и несколько строк импорта, а также тег script, который теперь стал более читабельным, а зависимости отчетливо видны.