Добрый вечер коллеги!
Кто пользуется vue.js? Подскажите по хранению данных: докумментация показывает несколько моделей реализации, но в целом для управлени тесно связанными компонентами рекомендуется использовать flux-подобный vuex для организации хранения состояний: где есть состояния, мутации - изменение состояний, действия и геттеры. И всё бы хорошо, да это сводит на нет все приемущества реактивности: теперь не получится просто использовать v-model, приходится определять сеттеры, геттеры, а как поступать с вложенными объектами - вообще не понятно, когда я получаю список объектов, но должен установить новое значение для его экземпляров, подскажите кто как организует хранение данных во Vue, очень интересен практический опыт
mapGetters поможет, из vuex через него нормально данные в компоненты протаскиваются и реактивными остаются
Максим
Aleksey
так данные то он протаскивает, но изменять то их нельзя
Aleksey
https://vuex.vuejs.org/ru/forms.html
Aleksey
только вот таким образом:
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
это ладно если это message, а как быть с массивом объектов? приходится городить огород из сеттеров
Максим
только вот таким образом:
computed: {
message: {
get () {
return this.$store.state.obj.message
},
set (value) {
this.$store.commit('updateMessage', value)
}
}
}
это ладно если это message, а как быть с массивом объектов? приходится городить огород из сеттеров
dispatch вызывает экшен в сторе, и он меняет данные
Иван
Добрый вечер коллеги!
Кто пользуется vue.js? Подскажите по хранению данных: докумментация показывает несколько моделей реализации, но в целом для управлени тесно связанными компонентами рекомендуется использовать flux-подобный vuex для организации хранения состояний: где есть состояния, мутации - изменение состояний, действия и геттеры. И всё бы хорошо, да это сводит на нет все приемущества реактивности: теперь не получится просто использовать v-model, приходится определять сеттеры, геттеры, а как поступать с вложенными объектами - вообще не понятно, когда я получаю список объектов, но должен установить новое значение для его экземпляров, подскажите кто как организует хранение данных во Vue, очень интересен практический опыт
В этом и состоит вся суть vuex. Ты можешь "просто использовать v-model" только пока у тебя передаваемый через него объект используется ровно в одном месте
Иван
Но как только этот объект используется в трех разных местах, ты не можешь и не должен вот так просто менять его напрямую, потому что однажды ты поймешь что забыл где он там ещё меняется и придется долго лазить по файлам, ища его
Иван
Штоп такого не было и придумали мутации и экшоны
Иван
Они все лежат плюс-минус в одном файле, все рядом и их гораздо проще изменять по необходимости
Иван
Насчет вложенных значений - используй айдишники объектов, без них будет тяжко
Иван
То есть чтобы там лайкнуть новость, ты вызываешь commit('likeArticle', this.article.id)
Иван
И дальше в мутации уже соответственно получаешь новость по айдишнику (в самом простом случае - фильтруя массив новостей) и увеличиваешь там количество лайков
Иван
Если у объекта есть айди, ты можешь хранить набор этих объектов не как массив, а как словарь, где каждый объект доступен по ключу-айди. Тогда получение объекта по айди будет быстрым и простым
Aki
Dorian
это как один из принципов ООП - объект (стор) и его свойства и методы
свойства можно читатать, а изменять только с помощью методов
Иван
Блин, мне вот что очень интересно
Иван
Слышали ведь о электронном паспорте, который как карточка обычная?
human
Да
Иван
Когда и где его можно получить будет? Говорили вроде что начнут выдавать как раз с этого месяца
Roman
Иван
Россия, какая ж ещё
human
Уже давно выдают
human
У нас в Хьюстоне точно
Артур
)
VasiliyIT
Господа, а как передать в пропсах булево значение ?
Чет не выходит
Иван
Просто prop сделай
Иван
<my-comp propName />
Артур
просто если передаешь то true если нет то false
Артур
<my-comp />
Артур
false
VasiliyIT
О класс! все просто !
VasiliyIT
очевидно, но невероятно )
Иван
Исчоп)
Armen
А ещё если у тебя тип String, Boolean, то порядок имеет значение
Aleksey
Если у объекта есть айди, ты можешь хранить набор этих объектов не как массив, а как словарь, где каждый объект доступен по ключу-айди. Тогда получение объекта по айди будет быстрым и простым
Благодарю, стало немного понятней с id, но по прежнему не особо удобная архитектура
Armen
Если String первый то при указании только имени пропса будет пустая строка, если первый Boolean - то true
Иван
Благодарю, стало немного понятней с id, но по прежнему не особо удобная архитектура
Задача просто не самая простая, но это один из самых оптимальных подходов. Лучше уж так, чем потом пытаться разобраться кто там чо кого у тебя меняет в стейте
Aleksey
ну как сказать, разные подходы есть, например регистрировать все изменения при отладке, тогда не встанет вопроса кто и что меняет
Иван
Ну а теперь представь что при сбое у клиента ты можешь получить слепок стора и последовательность экшонов, которая к этому привела?
Иван
А ведь это делается элементарно с тем же сентри и правильно подкрученным миддлварем
Aleksey
ну да, для логирования неплохое решение
Nikita
Всем привет! Пишу ТЗ для проекта, нужно описать среду выполнения, есть такой комментарий от заказчика:
"Файловый менеджер востребован как модуль для CMS / CMF. Он должен выполняться в браузере. Отсюда получаем, что реализация нужно делать параллельно: на Vue - фронтенд и общая логика работы приложения, на серверной стороне - обработчики аякс-запросов." Посоветуйте как правильнее будет написать. Спасибо=)
Sergey
Всем привет. Делаю CRUD-операции в рамках изучения Vue. У меня есть сущность Order. Вот есть 2 операции: update и create. Форма для обеих по сути одна. Как лучше реализовать? Я вынес форму отдельно в компонент и назвал его OrderForm. Дальше у меня есть 2 компонента: update и create, которые используют эту форму. Нормальное решение? Еще вопрос какой компонент должен взять на себя ответственность по отправке данных на сервер? Как я понимаю, это OrderForm?
Sergey
интересует именно правильность подходов и структуры проекта...
Sergey
вот такая структура проекта у меня сейчас. http://dl3.joxi.net/drive/2018/03/18/0008/3041/547809/09/e6bddc6642.jpg Это не мое. Сделал на основе шаблона https://github.com/PanJiaChen/vue-element-admin
VasiliyIT
=)
Anonymous
VasiliyIT
Господа, такой вопрос: у инпута v-model="inputModel"
в data( inputModel:' ')
в computed this.inputModel = 'blabla'
срабатывает только если в vuedev tools кликнуть по данному инпуту
VasiliyIT
тоесть что-то происходит, и вероятно считается значение ?
Почему же не считается сразу ?
Иван
Не надо в компутеде ничего менять
Иван
Он неизвестно когда вычисляется
Иван
Если надо реагировать на изменение чего-то немедленно, используй вотчер
VasiliyIT
блин, но если использовать вмето v-model volue инпута работает все, вот гадость
Иван
Компутед в гете ничего менять не должен в модели
Иван
Не делай так, компутед не для этого. Он только трансформирует другие значения, но ничего не меняет (ну, если без set)
VasiliyIT
и мне по идее это надо не на изменение, это я так в компонентах пытаюсь привязаться к в-модель, чтобы валидация работала по вводу символа в инпут
Leonid
Он и так привязан к дате
VasiliyIT
тоесть я хочу в куче компонентов исходя из введенного пропса изменить содержимое модели, это вообще законно ?
Иван
Што?
VasiliyIT
50 разных инпутов = 50 раз один компонент с разными пропсами, и я хочу чтобы если стоит например пропс = блабла содержимое данного интпута стало = блабла
Иван
Ну да, тебе достаточно в этом компоненте на Input v-model ставить
VasiliyIT
так а как ее менять исходя из введенного пропса ?
VasiliyIT
по сути у меня такой шаблон
https://github.com/vuetifyjs/vuetifyjs.com/blob/master/examples/forms/basicValidation.vue
Ziloliddin
кто знает, как сделать анимацию при нажатии на кнопку
Ziloliddin
или лучше смотреть в сторону css?
Иван
Кого менять-то? Исходя из какого пропса? Блин, сформулируй вопрос правильно и получишь половину ответа
VasiliyIT
Кого менять-то? Исходя из какого пропса? Блин, сформулируй вопрос правильно и получишь половину ответа
вот я взял компонент и повторил его 50 раз с 50 разными пропсами и например в 3 из 50 мне необходимо чтобы модель имела значение 'blabla'
VasiliyIT
я могу это сделать только пропсами
Иван
Просто покажи код компонента
Иван
Ты типа валидацию запихиваешь в компутед?
VasiliyIT
https://pastebin.com/t3B5ppmh
VasiliyIT
вот так как-то
VasiliyIT
=)
VasiliyIT
я при наличии определенного пропса хочу менять модель
Иван
computed: {
setLabel: function () {
let thisLabel = ''
if (!this.TotalBase) {
thisLabel = this.Label + ' в % '
} else {
thisLabel = ''
}
return thisLabel
},
Вот этот кусок у тебя должен быть вотчером
Иван
Если компутед у тебя начинается со слова set - это очень плохой признак