Oleksandr
Vue.component('group-item', {
template: '<div\
class="group"\
:class="{selected: selected}"\
@click="select"\
>\
<div class="group-color">\
<div\
class="group-color-square"\
:style="{ background: color }"\
></div>\
</div>\
<!— —><div class="group-name">\
{{ name }}\
<span\
class=overlay\
v-if="size"\
>{{ sizeNorm|percent }}</span>\
</div>\
<div\
class="icon show"\
:class="{active: showContour}"\
@click.stop="activateContour"\
></div>\
</div>',
props: {
id: Number,
type: String,
name: String,
color: String,
showContour: Boolean,
size: Number
},
computed: {
points: function() {
return this.$store.state.project[this.type+'Points'][this.id] || []
},
sizeNorm: function() {
return this.size/this.$store.state.project.pointsCount
},
selected: function() {
var selectionGroup = this.$store.getters.selectionGroup
return selectionGroup && selectionGroup.id === this.id
}
},
methods: {
select: function() {
this.$store.dispatch('selection', {
pointsList: this.points,
source: 'group-item'
})
}
}
})
Stanislav
тормоза случаются из-за большова кол-ва реактивных данных
"Большого" - это сколько?
#3301⏣SoulString
в чем именно цель?
получить значение при любоv (включая автозаполнение) изменении - change
Bohdan
в чем именно цель?
у меня на кнопка заблокирована если нет значений, а при автозаполнении как бы нет значений в переменных
#3301⏣SoulString
у меня на кнопка заблокирована если нет значений, а при автозаполнении как бы нет значений в переменных
v-model не срабатывает иначе говоря? ивент change попробуй
Bohdan
v-model не срабатывает иначе говоря? ивент change попробуй
вызвать событие или поветить обработчик?
Stanislav
как минимум 10 групп с 5000 тычячами точек
Скорее всего, тормозит не реактивность, а рендер.
Маловато для тормозов на Вью
#3301⏣SoulString
вызвать событие или поветить обработчик?
обработчик, можно вида val = $event.target.value
Oleksandr
но ты выше какой-то другой код показывал
вначале был упрощенный пример хранилища, а потом показал как компонент создается, теперь сам компонент
Oleksandr
Скорее всего, тормозит не реактивность, а рендер.
Маловато для тормозов на Вью
тут легко может быть 20 групп по 50 000 точек
Oleksandr
я уверен что нужно убирать эти данные из реактивности
Oleksandr
нет, точки не показываются
Oleksandr
показываются ве другие свойства группы
Oleksandr
но точки нужны для других операций
Bohdan
обработчик, можно вида val = $event.target.value
та как бы не отлавливается событие при автозаполнении, сейчас пример скину
🅅aleriy
вначале был упрощенный пример хранилища, а потом показал как компонент создается, теперь сам компонент
у тебя в шаблоне не используется points, у тебя точно этот код тормозит?
#3301⏣SoulString
та как бы не отлавливается событие при автозаполнении, сейчас пример скину
у меня флоат плэйсхолдер на этом построен
#3301⏣SoulString
нормально ловится автозаполнение
Oleksandr
у тебя в шаблоне не используется points, у тебя точно этот код тормозит?
у меня вся система висит, а не только этот код - что б ты не нажимал задержки от системы, но убираешь их и все летает
🅅aleriy
🅅aleriy
после чего тормоза пропадают?
Stanislav
у меня вся система висит, а не только этот код - что б ты не нажимал задержки от системы, но убираешь их и все летает
Тебе обязательно глобально эти данные нужны?
🅅aleriy
да при чем тут обязательно не обязательно?
🅅aleriy
пусть хранит глобально
🅅aleriy
это не проблема
🅅aleriy
можно весь стейт приложения глобально хранить и не иметь тормозов
🅅aleriy
точки из реактивности, т.е. из групп
ка кты понимаешь реактивность вообще в своем приложении? где она у тебя?
Whooooop
Попробуй данные точек получать через method
Whooooop
И вынести данные в сторонний объект
🅅aleriy
вот ппц... у меня данных 1 млн записей в глобальном сторе, подключаются к компонентам, тормозов нет
Oleksandr
Попробуй данные точек получать через method
так оно сейчас и реализовано, но усложняет код
🅅aleriy
при чем тут внешние объекты вообще
🅅aleriy
при чем тут methods
🅅aleriy
получать данные с сервера надо минимум через atcions, пихать в стор и подключать чреез getters
Oleksandr
задача стоит сделать свойство нереактивным :)
🅅aleriy
вот еще раз
Oleksandr
ребята не сосрьтесь 😁
🅅aleriy
что ты понимаешь под реактивностью
🅅aleriy
где она в твоем случае тут?
Bohdan
https://codepen.io/anon/pen/MVzvoW
Bohdan
а вот чувак пишет, про эту багу, только я не понял как ее пофиксить
Bohdan
https://github.com/vuetifyjs/vuetify/issues/3679
Oleksandr
где она в твоем случае тут?
если points храняться в группе и я добавляю еще одну точку, то vue это отлавливает и вызывает событие изменения обьекта группы, и все слушатели соответственно получают уведомление об изменении и реагируют на них
🅅aleriy
если points храняться в группе и я добавляю еще одну точку, то vue это отлавливает и вызывает событие изменения обьекта группы, и все слушатели соответственно получают уведомление об изменении и реагируют на них
без кода твоего стора конечно сложно до конца понять что там у тебя, но по коду компонента уже куча замечаний есть
🅅aleriy
для начала все сделай геттеры в сторе для поинтов
🅅aleriy
т.е. вот этот код вынеси из компонента
🅅aleriy
computed: {
points: function() {
return this.$store.state.project[this.type+'Points'][this.id] || []
}
dima
Привет всем. А по какой причине событие created может происходить дважды?
🅅aleriy
getters: {
getPoints: (state) => (id, type) => {
return state.project[type+'Points'][id] || []
}
🅅aleriy
@oleksandr_pro далее научись по нормальному подключать сущности vuex
🅅aleriy
используй mapGetters в разделе computed
🅅aleriy
computed: {
...mapGetters(['getPoints'])
🅅aleriy
ну и в самом шаблоне вызывай с параметрами уже их
🅅aleriy
геттеры с параметрами прекрасно кешируются
🅅aleriy
впрочем это все в доке по vuex хорошо расписано
Oleksandr
Спасибо
🅅aleriy
возможно только я такой тупой, но я ничего не понял из твоего вопроса
🅅aleriy
в чем проблема собственно?
🅅aleriy
покажи код и скажи что ты от него ожидаешь
Ziloliddin
это css в указывается animation-duration, или я не правильно тебя понял?
Mikhail
7 секретных паттернов Vue, о которых консультанты не хотят, чтобы вы знали — доклад Chris Fritz https://www.youtube.com/watch?v=7lpemgMhi0k
Anonymous
первый секретный паттерн вуе - плакать в гите почему в vuex поддержку типизации не вмерживают
🅅aleriy
забавно, сам javascript пояфился как уход от статически типизированных языков, чтобы программисты могли не заморачиваясь быстро лобать код сосредоточившись на задачах, а не на описательной части и синтаксисе
🅅aleriy
теперь же все как с ума посходили :)) то typescript им подавай, то flow :))
🅅aleriy
при чем сколько проектов видел, больша половины типизаций включает в себя any type :)))
🅅aleriy
получается что вся эта типизация превращается в тупой фарс
Андрей
js появился потому что хуяк-хуяк и в прод.
Дмитрий
теперь же все как с ума посходили :)) то typescript им подавай, то flow :))
Потому что пришли пхпшники и не смогли сложить строку с числом