Bogdan
Всем привет.
Есть вопрос. Мне нужно в приложение на Vue.js впилить Flow.js (не типизацию, а аплоадер, они просто одинаково называются). Как лучше всего это сделать по архитектуре? плагином? пихать во vuex? директивами?
https://github.com/flowjs/flow.js
Родион
подскажите как в компоненте отследить что поменялась переменнай из vuex
мне надо проследить за ней именно в js части а не в шаблоне (там понятно что через getter например)
Tom
Я не уверен, но полагаю что можно сделать watch на this.$store.state
Tom
Ребята подскажут еще мб что-то
Родион
ага, я подругому пробовал. спасибо, сейчас проверю
Tom
Давай
Родион
watch: {
'this.$store.state.stage': function (val) {
console.log(val)
}
},
не срабатывает что-то
Tom
попробуй без this
Родион
вообще идеально было бы вообще на геттер повесить ватчер )
ща
Родион
только при первом изменении срабатывает
Родион
хмм
Bogdan
сначала создаешь computed property со ссылкой на свойство из vuex state
дальше вешаешь watch на это computed proprty
Bogdan
все
Stanislav
или делаешь сразу нормально, как UI = f(state)
Astr0junk
В шаблоне ставишь в директиву то самое компьютед проперти
Astr0junk
Ну и стейт меняется и ui тоже
Astr0junk
Не факт что должно менять юай. С другой стороны, а зачем ещё то это использовать.
Astr0junk
Разве что вычислить другое значение какое-то
Oleksandr
Сообщество, как считаете, какие плюсы и минусы вью роутера для большого проекта ?
Родион
вобщем я в геттер вынес логику из компоненты и использую напрямую в шаблоне в условии
Родион
так работает без проблем
Родион
просто получается что у меня кука ставится в компоненте а вот проверяется в геттере vuex в другом файле совершенно
Родион
как то оно не по фэншуй
Родион
компонента отображается в зависимости от переменной stage из vuex
отображается при двух значениях stage
в нутри компоненты функционал subscribe
после удачной подписки на рассылку я ставлю куку в клиент и показываю сообщение текстовое вместо формы
так вот при изменении stage надо опять показать форму т.к. там другая кука для скрытия формы
Родион
если кто понял объяснение )) как в таких случаях правильно делать?
Oleksandr
если кто понял объяснение )) как в таких случаях правильно делать?
Может быть тебе нужен Вью роутер ?)
Michael
Сообщество, как считаете, какие плюсы и минусы вью роутера для большого проекта ?
Минусом можно считать отсутствие (вроде) некоего "динамического" роутиша как в реакт-роутере последнем. Честно говоря, у меня нет идей зачем эту диковину юзать. Зато на интеграцию вью роутера ушло ра в 10 меньеш времени чем реактовского.
Stanislav
Родион
роутер тут не причём
stage меняется в зависимости от времени
т.е. сначала у нас подписка на одно событие, потом на другое
и куки разные
Oleksandr
Минусом можно считать отсутствие (вроде) некоего "динамического" роутиша как в реакт-роутере последнем. Честно говоря, у меня нет идей зачем эту диковину юзать. Зато на интеграцию вью роутера ушло ра в 10 меньеш времени чем реактовского.
Ну так получается, что все приложение загрузится целиком и полностью вместе со скриптом, и какбы будет экономить трафик
Oleksandr
Которое инициализируется
Oleksandr
Но сейчас думаю, что лучше Вью роутером сделать, чтобы не грузить по 100 раз один макет
Oleksandr
Макет компонента
Michael
Ну так получается, что все приложение загрузится целиком и полностью вместе со скриптом, и какбы будет экономить трафик
Это с динамическим импортом вебпака делается в обод вью.
Michael
обход*
Michael
чанками
Родион
В шаблоне ставишь в директиву то самое компьютед проперти
сейчас так и сделал. не устраивает что в геттере вуекс кука проверяется а ставится она в компоненте. размазался функционал по файлам..
Родион
о! наверно вот так более правильно будет:
// если требуется доступ и к локальному состоянию, нужно использовать традиционную функцию
countPlusLocalState (state) {
return state.count + this.localCount
}
Родион
не через геттер а через состояние + вызвать там метод в локальном контексте
Родион
пробую )
Илья
привет! а кто-нибудь ковырялся с contenteditable? я вот накидал небольшой пример: https://codepen.io/dubrowsky/pen/KyRMWK
может кому интересно +)
там два компонента, сначала инпуты с v-model - это типа чо должно получиться, потом - наивная реализация того же самого на contenteditable + тупой лог изменений.
вот реализация на contenteditable работает очень странно, ну и я только наполовину понимаю, почему так.
Родион
computed: {
...mapState({
isSubscribed (state) {
return Cookies.get(state.all[state.stage].cookie) != null
}
}),
...mapState(['stage'])
},
воркед
если кому понадобиться
Родион
в шаблоне юзаю <template v-if="isSubscribed">
ну и логика с куками вся в компоненте остаётся
Bogdan
Ок, еще раз попробую.
Есть вопрос. Мне нужно в приложение на Vue.js впилить Flow.js (не типизацию, а аплоадер, они просто одинаково называются). Как лучше всего это сделать по архитектуре? плагином? пихать во vuex? директивами?
https://github.com/flowjs/flow.js
Родион
хмм, а собственно что это? загрузка файла с клиента на сервер?
если так то я бы прикрутил эту либу в той компоненте где у меня форма загрузки файлов.
или я чего не понял?
Michael
привет! а кто-нибудь ковырялся с contenteditable? я вот накидал небольшой пример: https://codepen.io/dubrowsky/pen/KyRMWK
может кому интересно +)
там два компонента, сначала инпуты с v-model - это типа чо должно получиться, потом - наивная реализация того же самого на contenteditable + тупой лог изменений.
вот реализация на contenteditable работает очень странно, ну и я только наполовину понимаю, почему так.
я запомнил. скоро о нужно будет, скорее всего)
Илья
я запомнил. скоро о нужно будет, скорее всего)
ок =) мне-то пока не очень нужно, скорее теоретический интерес, ну и так, голову поломать )
Илья
тут вроде бы надо добиться, чтобы узел с contenteditable при фокусе перестал обновляться при ре-рендере
Michael
тут вроде бы надо добиться, чтобы узел с contenteditable при фокусе перестал обновляться при ре-рендере
установка курсора в то же место. есть что-то типа caret.js
Michael
можно подтянуть как зависимость. и ещё есть темки схожие
Илья
имхо возня с курсором -путь в никуда )
Илья
ну точнее этим должен заниматься кто-то уровнем ниже
Илья
а от вью надо добиться, чтобы он просто не трогал этот узел
Илья
ну да, я в этом смысле )
Michael
а вообще можно компоненту сделать которая после рендера ставит курсор туда, откуда он ушёл
Michael
ну там чтобы скобочки на смайлики менять
Michael
это толкьо переренером
Илья
я делал риалтаймовый типограф. я ебнулся если честно )
Michael
ну там непросто, да)
Oleksandr
Это с динамическим импортом вебпака делается в обод вью.
Ну это скорее плюс, что приложение будет лежать в кеше
Michael
а тут плюсы минусы
Alex
Ок, еще раз попробую.
Есть вопрос. Мне нужно в приложение на Vue.js впилить Flow.js (не типизацию, а аплоадер, они просто одинаково называются). Как лучше всего это сделать по архитектуре? плагином? пихать во vuex? директивами?
https://github.com/flowjs/flow.js
Отдельный компонент-обертку сделать и переиспользовать уже его везде
Vladimir
а от вью надо добиться, чтобы он просто не трогал этот узел
В реакте есть shouldComponentUpdate, возможно во вью есть что-то аналогичное
Oleksandr
а тут плюсы минусы
А как можно сделать экран загрузки ?
Я думаю сделать другой бандл, который будет встроенным в индекс, и "как-то" отображать прогресс загрузки основного бандла. Вопрос как ?)
Michael
фсинк авайт
Michael
это всё у вебпака есть
Илья
ну вот эван в каком-то из ишшьюс написал " во вью такого нет, потому что при нашей модели реактивности в этом нет нужды, считайте что мы уже реализовали этот метод за вас"
Michael
а он подходит ко всем роутерам и фреймам)
Michael
реактивность классаня.
Alex
В реакте есть shouldComponentUpdate, возможно во вью есть что-то аналогичное
Вью сам разруливает. Мы ему только атрибутом key местами помогаем
Alex
В реакте есть shouldComponentUpdate, возможно во вью есть что-то аналогичное
Если вам логику какую-то дополнительную вызывать — есть хуки beforeUpdate & updated
Michael
и вотчеры
Илья
https://github.com/vuejs/vue/issues/4255#issuecomment-261778207
Astr0junk
Парни, есть вопрос по хэндлерам мыши
Astr0junk
кто как обрабатывает клик и ЛОНГ клик