Где хранить бизнес логику?

Question

[l4m3r]

Начал осваивать vue сразу с боевого примера, а не с hello world: решил написать симулятор клеточного автомата (игра "Жизнь", например). Не понимаю один архитектурный момент.
Допустим, экран будет разделён на 2 части: верний тулбар настроек и остальная область - собственно, канвас самой игры (webgl three-js).
В итоге, имеем 3 компонента:

<App>
   <Settings>
   <Grid>

1) Получается, весь код и вся логика игры должны находиться в файле Grid.vue? Которая будет обращаться к Settings за параметрами и собственно рендерить. Какой-то "божественный объект" получается... Да и в концепцию vue как-то не входит: ведь тут webgl, а не dom.

2) Подумал ещё вынести логику отдельно от Vue. Создать классы Cell.js, Game.js и прочее. Ну тогда получается Grid не сильно нужен.

Answer 1

[Дима Паутов]

Создать классы Cell.js, Game.js

именно так. Vue вам не запрещает писать свои классы.
Создайте папку, в ней пишите свои классы, после импортируйте их в шаблоны и работайте.

Получается, весь код и вся логика игры должны находиться в файле Grid.vue? Которая будет обращаться к Settings за параметрами и собственно рендерить

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

Comments

[l4m3r]

Спасибо за ответ. Чуть позже отмечу решением.

если вам нужно сделать так, что бы компоненты общались между собой, то лучше всего используйте vuex,

Я ещё только в начале документации. Не знал, что для общения компонентов между собой нужен сторонний модуль. Почему-то казалось, что взаимодействие выглядит примерно так: из Grid бы ищем компонент Settings и там вызываем его метод (который мы напишем) типа const config = root.App.Settings.getConfig() (getConfig пройдется по всем инпутам и возвратит массив значений). Ну это говнокод, наверное. Буду дальше читать.

[l4m3r]

А ещё не подскажите? В Style-guide написано:

<!-- In single-file components and string templates -->
<MyComponent/>

<!-- In DOM templates -->
<my-component></my-component>

Я не пойму. DOM-templates это что имеется ввиду. Файлы типа index.html?
То есть во всех .vue файлах, в template, я должен использовать PascalCase?

[ned4ded]

l4m3r, добрый день!

Темплейты во вью могут быть двух видов: dom-template (написанные внутри html файла, в котором подключается vue через тег script), string-template (сохраненные внутри js файла строки с версткой; .vue файлы являются своего рода string-template, т.к. вебпак их вытаскивает при бандле).

Внутри string-template вы можете использовать как CamelCase, так и camel-case, но хорошей практикой будет выбрать что-то одно. Вью при рендеринге будет транспайлить в тег оба варианта.

Внутри dom-template вы не можете использовать CamelCase, т.к. браузер не чувствителен к регистру в названиях тегов, что при первичном парсе страницы приведет к возникновению тега не <camel-case>, а <camelcase>.

[ned4ded]

l4m3r, сторонний модуль и не нужен изначально, компоненты могут общаться через события (this.$emit('some-event') внутри метода ребенка). Необходимость во vuex возникнет в тот момент, когда у вас многоуровневая структура нескольких модулей (например, 3-4 уровня иерархии), а данные для детей разных модулей общие.

[Kutuzov_ska]

l4m3r, Как мне кажется, у вас не совсем верное представление о Vue. Сторонний модуль Vuex - это аналог Redux у React. Vue, создан для View из MVC. Но конечно он не запрещает в своих объектах хранить и логику.

Если vuex рано, то пробуйте google: "глобальная шина событий vue". Можно попробовать и Mixins.

Что-то мне подсказывает вы слишком рано начали боевой проект не попробовав hello-world.

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

Лучше всего просто пишите код, а потом у вас пояится желание эту бизнес логику куда то перенести, когда она у вас сильно разбухнет.

А ну и последнее, не из Grid нужно вызывать метод компонента Setting, а наоборот из Setting метод Grid. Потому что входные параметры в компонент как и у реакта одно направленны.

По поводу второго вопроса: Вью тем и прекрасен что вы никому ничего не должны.

Это гид по стилю. Как говорили пираты - Кодекс — это просто свод указаний, а не жёстких законов.
Но да, в .vue лучше MyComponent, а если вы например подключаете vue через cdn к html файлу, то

Answer 2

[E]

Прочитайте про vuex. И через модули все можно сделать.