ну на этапе активной разработки, особенно в самом начале это реально кучу времени съедает

ну если у тебя поменялись какие-то данные, от которых зависит мутация, ты об этом даже не узнаешь

Эээ, все коммиты видны в девтулзе же

Эээ, все коммиты видны в девтулзе же

не все, а только удачные

Эээ, все коммиты видны в девтулзе же

и у меня вообще не все =)

у меня есть коммиты которы не отображаются в тулзах

у меня есть коммиты которы не отображаются в тулзах

Такого не может быть же

Хмм

ну я так то же думал, в итоге такое есть

А если серьёзно, то как комиты могут быть неудачными?

Там же даже ветвления почти быть недолжно

ну если у тебя в мутации ошибка произошла

Там же даже ветвления почти быть недолжно

с чего бы это

ну если у тебя в мутации ошибка произошла

А как она может произойти? Я вот в мутации ТОЛЬКО меняю значения полей и все

у меня там есть некотороя логика

Даже от ветвлений избавлюсь по максимуму

у меня там есть некотороя логика

Она должна быть в дейсьвиях

Она должна быть в дейсьвиях

нет не должна

Мутация мутирует, тупо мутирует

там не асинхронной логики

Действия для логики

там не асинхронной логики

И?

это атомарная операция

Просто то что нужно помом делаешь в then

поэтому там должно быть то что должно быть выполнено атомарно

мутация чисто для того, чтоб стор изменить

да, но у этого изменения может быть логика

поэтому там должно быть то что должно быть выполнено атомарно

Если в действии ты вызывуешь мутацию, это типо не атомарно?

идеологически мутация = транзакции

если тебе в рамках одной транзакции надо сделать несколько изменений основанных на логике, то ты делаешь их в рамках одной транзакции

правда жалко что нет ролбэка при ошибках

да, но у этого изменения может быть логика

А можешь привести пример?

в рамках идеологии каждое действие это атомарная транзакция

при добавление просто доабвляем в лист

при удалении нам еще надо удалить маркер

просто какой тогда смыл в мутациях, если можно сделать одну типа set (state, data) { _.assignIn(state, data) },

а в actions уже какая-то асинхронщина, логика для вызова мутиаций/последовательности мутаций

поправте меня, если я это не правильно понимаю

в рамках идеологии каждое действие это атомарная транзакция

Ога, только у тебя функция тоже является атомарной

Поэтому действие атомарно

Ога, только у тебя функция тоже является атомарной

не каждая

не каждая

Привели пример не атомарной функции, внутри которой нет асинхронщены

И которая не атомарна

ну да, я про асинхронщину

Так вот vuex тебе разрешаешь делать композицию действий, вот она не будет атомарной

Я так придерживаясь всегда: 1) тупая мутация 2) действия с логикой (обёртка над мутацияей) 3) композиция действий для сложной логики

До сих пор НИКАКИХ проблем не испытывал

И это легко дебажится

тоесть вместо того что бы сделать одну функцию в рамках бизнес логики ты делаешь несколько ?

^ да

Причём если ты наименования мутаций содержишь в константах, то именовать действия обертки ваще легко

я так делал

тоесть вместо того что бы сделать одну функцию в рамках бизнес логики ты делаешь несколько ?

Да

экшн диспатчит экшн

И это не мешает мне, потому что vuex поддерживает модули

Константное именование мутация позволяет мне не париться над именования действий аберток и сразу видно, где обёртка а где действие

тоесть вместо того что бы сделать одну функцию в рамках бизнес логики ты делаешь несколько ?

И кстати это смешной вопрос от человека, который сейчас сидит и дебажит мутации))

Да

вот этого я не понимаю. У тебя есть задача создать point на карте. Зачем тебе делать несколько экшенов, если это единая логическая оперция?

вот этого я не понимаю. У тебя есть задача создать point на карте. Зачем тебе делать несколько экшенов, если это единая логическая оперция?

Ну, во первых с точки зрения интерфейса я выставляю наружу только действия

Это как геттер и сеттер, также идеалогия

зачем тебе другие мутации кроме _.assignIn(state, data)?

зачем тебе другие мутации кроме _.assignIn(state, data)?

Для логирования в vue dev tools

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

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

так в этом нет проблемы

ERROR: S client not available

вот этого я не понимаю. У тебя есть задача создать point на карте. Зачем тебе делать несколько экшенов, если это единая логическая оперция?

Конкретно вот это задача, это 1 действие и одна мутация

ну да, вот у меня так же

Не такой уж ибольшой оверхед

Мутация только мутирует и все, а всякие там проверки и прочая лабуда в действии

Кстати из-за этого еще и мутации становятся чистыми и понятными

Смотришь на эти пару строк и сразу все ясно

вообще выглядит логичным

Мутация только мутирует и все, а всякие там проверки и прочая лабуда в действии

в офф примерах vuex есть логика в мутациях

https://github.com/vuejs/vuex/blob/dev/examples/chat/store/mutations.js

Всем привет) а кто-нибудь подскажет ссылку на best practices, patterns по vuejs? в официальной доке, на мой взгляд, их маловато

Никто не натыкался на infinity-scroll с preload и afterRemover? Нужно грузить картинки отрисвывать их и после скрола дальше удалять с страницы заменяя пустым div'ом.

Всем привет) а кто-нибудь подскажет ссылку на best practices, patterns по vuejs? в официальной доке, на мой взгляд, их маловато

они ничем не отличаются от реакта и полимера

да и ангуляра по сути

интересно. а я уже начал бояться, что начинаю применять некоторые react паттерны во vue x)

1) не нарушайте S в SOLID - ваши UI-компоненты должны делать ровно одну вещь. Если в описании что компонент делает используется "и" - это может быть хорошим поводом разбить его на отдельные компоненты 2) разделяйте "умные" компоненты в которых хранится логика приложения и "глупые" отвечающие только за представления. Для глупых может быть оправдано использование functional: true 3) здесь вам не Реакт(с). Не передавайте обработчики событий в нижние компоненты (вместо этого emit события делайте), не передавайте в нижние компоненты "рендерилки" каких-то кусков - вместо это во Vue положено использовать слоты 4) максимально разделяйте бизнес логику, логику отображения и транспортный слой. Транспортный слой вообще стоит делать framework-agnostic, бизнес-логику можно выносить в vuex если вы его используете или в отдельные сервисы. Избегайте бизнес-логики в глупых компонентах любой ценой 5) По максимуму используйте вычислимые свойства. Причем в обе стороны - это позволяет упростить код шаблона и бизнес-логики одновременно, сохранив тонкий слой преобразований 6) Старайтесь не расширять прототип Vue. Это приводит к тому, что становится сложно рассуждать откуда появились те или иные методы у компонента - вместо этого лучше использовать обычные es6 модули и помнить, что они синглтоны 7) Очень аккуратно наследуйте компоненты. Это нужно крайне редко, сценарий - специализация компонент и "тонкая настройка". Но еще раз - это стоит делать очень редко и очень аккуратно 8) Не бойтесь использовать jquery и т.п. - много вещей можно быстро сделать с их помощью, но всегда изолируйте их в отдельные компоненты. Не допускайте больших компонентов c vue-логикой и jquery спагетти-кодом 9) Избегайте шины событий. Это допустимо для небольших проектов, но такое решение очень плохо масштабируется. Выгоднее мыслить в терминах изменения состояний 10) Аккуратно обращайтесь с реактивностью - не забывайте использовать Vue.$set когда надо, пишите ваши компоненты устойчивыми к ошибкам

Это из моих набросков

Ого, спасибо)

Это из моих набросков

В шапку, срочно!

Всем привет) а кто-нибудь подскажет ссылку на best practices, patterns по vuejs? в официальной доке, на мой взгляд, их маловато

https://pablohpsilva.github.io/vuejs-component-style-guide/#/

Всем привет

Я хочу использовать vue-resource, установил его и импортирую в верхнем компоненте App

var VueResource = require('vue-resource'); Vue.use(VueResource);

он поидее теперь во всех компонентах должен быть доступен как this.$http?

Да

Да

Я собственно так и думал, но у меня почему то не так. Если вывести в консоль VueResourse то свойство показывает что он установлен, а если попробывать сделать запрос - то получаю ошибку

Error in created hook: "TypeError: Cannot read property 'get' of undefined"

мог бы ты подсказать что я делаю не так, вот кусочек кода

https://gist.github.com/be1fc17f06a5c3d63a81725486084eec

created не слишком рано? попробуй на mounted поменять

created не слишком рано? попробуй на mounted поменять

спасибо, сейчас попробую

Error in mounted hook: "TypeError: Cannot read property 'get' of undefined" found in —-> <Project> at /home/deface/PycharmProjects/src/b2b/static/pm/src/components/Project.vue

значит что-то не так делаешь, а покажи код компонента выше