Comments 10
1-й момент: вместо того, чтобы следить за $store.state.count лучше использовать computed свойство.
{
computed: {
starsCollected() {
return $store.state.count;
},
},
watch: {
starsCollected(value) {
if (value >= 5) {
// Странное решение для отображения победы, но ладно
alert('...');
window.location.reload();
}
},
},
}
2-й момент: вы параметры игры передаете из data, делая их реактивными, в т.ч. все, что формируется в Scenes. С т.з. производительности очень так себе идея. Если использовать Composition API, то можно избежать реактивности. Либо можно параметры передавать также как computed свойство, тогда Vue вроде как тоже не будет вешать реактивность на все, что внутри объекта.
В дополнении к этому я бы очень советовал использовать Pinia вместо Vuex. Она на Typescript и помогает избежать багов, связанных с типами данных.
2-й момент: вы параметры игры передаете из data, делая их реактивными, в т.ч. все, что формируется в Scenes
Чего-то вроде observable.ref (из МобХ) так и не появилось?
Тут вместо вочера лучше использовать сеттер компьютед переменной.
На саом деле на счёт computed св-ва не соглашусь, поскольку состояние с количеством хранится внутри store, поэтому было бы логичнее хранить в геттере store св-во isWin, которое расчитывалось исходя от count и уже непосредственно его пробрасывать на компоненты
Наверное, да. Тут в целом код такой, что вместо того, чтобы его рефакторинг, лучше заново все написать.
Спасибо за комментарии, все они уместные)
Кто-то даже сделал форк на гитхабе и воплотил все описанные выше комментарии в жизнь)
---
Не думаю что переданный конфиг в data - хоть как то замедлит игровой процесс, так же как и выбор как следить за стораджом(watch или computed), как по мне это уже больше экономия на спичках и вкусовщина.
----
Напомню что, цель статьи была - показать как легко и просто можно реализовать обмен данными между Vue и игрой на Phaser
Обмен данными между Phaser.js и Vue.js используя Vuex