[ВАЖНО - Читай описание] Урок 7/8. Подсчет Total'a в корзине Vue. Кнопки "+" и "-" на товарах
ฝัง
- เผยแพร่เมื่อ 26 ก.ย. 2024
- ВАЖНО - Видео на этом канале 3х летней давности и большинство уже НЕАКТУАЛЬНЫЕ в силу изменения синтаксиса, методов и подходов во Vue.js версии 3. Все видео были записаны на Vue.js версии 2. Много чего уже просто НЕ БУДЕТ РАБОТАТЬ или выдаст ошибки.
Новый канал на актуальном стеке Vue.js v3, Pinia, Vue router@next, Ionic (мобильные приложения), FireBase (база данных, аутентификация и тд) - / @intothecoding
НО! Новый канал ведется на АНГЛИЙСКОМ ЯЗЫКЕ - так что у вас есть уникальная возможность научиться кодить и подтянуть язык - так как Английский нужен всегда!
Жду вас на новом канале!
![[ВАЖНО - Читай описание] Урок 8/8. Refactoring приложения Vue. Best-practise.](http://i.ytimg.com/vi/gG7lyc4MHI0/mqdefault.jpg)
![[ВАЖНО - Читай описание] Урок 8/8. Refactoring приложения Vue. Best-practise.](/img/tr.png)
![Уроки VUE-CLI 3 учим за 1 час для начинающих с нуля [ vue.js компоненты ]+ много полезной информации](http://i.ytimg.com/vi/4O1twLpg-7A/mqdefault.jpg)
![[ВАЖНО - Читай описание] BUTTON. Создание универсального и переиспользуемого компонента Vue](/img/n.gif)
чувак это круто! чистая практика, немного теории, и без воды. Больше курсов давай.
vue, vuex, shop
тоже хочу больше
Урок хорошо зашел, все получилось, хоть и с повторным просмотром, мне нравится особенно, когда сначала говорит план, потом его выполняет, пробегается снова по выполненным шагам, очень грамотно и доступно
Спасибо за видео! Господи, это и правда годнотища
Респект за видео! Дальнейших успехов
Те кто смотрит этот урок на Vue 3 и читал комменты в прошлом ролике, ну всё, приехали. Если вы пытаетесь получить данные не из props cart_data, а из computed CART, то сталкиваетесь с проблемой с получением CART в другом computed - cartTotalCost. Тут уже можно выключать видео либо перекатываться на vue 2.
Хорошие уроки! Спасибо. Иногда приходилось скорость уменьшать на 50% и нормально...
Офигенно!
Спасибо огромное!
периодически в кол-во товаров в одном из них выводит NaN вместо значения
Как и все уроки супер, единственное по технической части: сделайте, пожалуйста, что-то со звуком, постоянно скачет, очень неудобно и иногда минус уши.
Отлично объясняете. Спасибо за информативные видео. Не могу разобраться теперь как сохранять состояние всей корзины в localStorage. При перезагрузке страницы постоянно подгружаются данные из API. Хотелось бы увидеть информацию об этом🙏
Лайк. Но можно было добавить еще хотя бы в конце видео. Что если прикреплять сервис с оплатой к корзине. то стоит брать с базы данных посчитав цену а не с цены, что указана в корзине. ну там много условностей короче, которых забыл, просто смотрел обзор об том как подулючить оплату, но еще не применял.
Друзья как сделать чтобы при обновлении данные в корзине не исчезали??? Кто нить знает? Или только через локал сторедж?
пожалуйста запиши урок хранения данных в корзине из localstorage (есть модуль npm i nuxt-vuex-localstorage)
👍
Уважаемый, где то можно взять иходный код?
Всем привет! При перезагрузке главной страницы и неоднократном нажатии на Add to Cart, ловлю NAN в корзине в количестве. Если нажать один раз и подождать секунду, то такой проблемы не будет. В чем может быть проблема? При чем это только при перезагрузке страницы.
Почему span вместо button? Это же такие же кнопки как "add"/"delete"
Если вы про кнопки "+" и "-" . Да можно и через button, просто button получит стили по-умолчанию от браузера, а span нет. В моем случае, учитывая, что я просто хочу сделать "+" и "-", мне проще сделать это через span, чтобы не затирать нативные стили у элемента button.
Спасибо за урок.
Скажите пожалуйста, практичнее прокидывать массив cart в дочерний компонент из каталога или в самом дочернем компоненте обращаться к store за этим массивом
и уже варировать им?
Denis Rotaru я уже забыл как у меня слелано в уроке, но логичнее обращаться из корзины к vuex. Ведь по сути корзина не связана с каталогом и хранить в каталоге данные, методы, вычисляемые св-ва и прочее, относящиеся к корзине было бы не очень хорошо. Просто дабы не захламлять компонент каталога я бы это сделал в корзине
не понимаю, почему некоторые ноют, что автор по ходу дела переделал метод, им такой качественный контент делай, так они ещё на такие пустяки ныть будут)
Добрый день! Пришел из мира C# и отсутствие точки с запятой в конце строк смотрится чуждо. Это хорошая практика как-то нацеленная на облегчение "веса" кода или стилевые особенности автора?
На вес сборки это не сильно влияет. Просто лень, если хотите:) es6 это допускает. Либо везде ; либо нигде. Решать вам:)
Мне удалось сделать увеличение и уменьшение товаров следующим образом:
у секции tempate компонента v-cart-item вешаю обработчик события для минуса и плюса у кнопок:
-
+
,
а у секции скриптов просто делаю инкремент и декремент количества (quantity) для товаров которые лежат у корзине, т.е. для cart_item_data.Все это делал без использования экшенов и мутаций:
decrementItem () {
if (this.cart_item_data.quantity > 1) {
this.cart_item_data.quantity--
}
},
incrementItem () {
this.cart_item_data.quantity++
}
При этом у total сумма считается автоматически (реактивно).
Богдан Белашенок Богдан Белашенок только вы меняете пропсы, что очень плохо делать. Более того, если вы захотите вывести тотал где то в другом месте НЕ в компоненте корзины - там он не поменяется, так как вы посчитали его локально в корзине.
Вопрос про + / -. А почему нельзя написать просто через this в компоненте cart-item, без экшенов и т.д? Если это не реактивно, то как вообще проверять на реактивность?
methods: {
decrementItem() {
this.cart_item_data.count--
},
incrementItem() {
this.cart_item_data.count++
}
}
Андрей Будников props нельзя менять. Они только для чтения. Неговоря уде о том, что надо изменять исзодные данные, которые потом передаются пропсами, а не сами пропсы
Почему тотал не в сторе считается? разве это неправильно?
Здравствуй!
подскажи пожалуйста,
например у нас есть 3 категории: женская, мужская и детская одежда.
есть 3 REST API с товарами каждой категории.
в хедере есть 3 кнопки с ссылками, которые должны вести на шаблон v-category.
вопрос: какой алгоритм должен быть, если я хочу при клике, например, на мужскую одежду перейти на шаблон и чтоб у меня подгрузилось из стора геттер PRODUCTS_FOR_MEN ?
Можно несколькими путями. 1 вариант: создаете общую страницу, на которой будут отображаться товары в зависимости от категории. Кладете ее в router-view. При клике на категорию в хедере переходите на эту страницу в роутинге и зовете нужный API. Кладете данные в геттер в сторе и в компоненте страницы распихиваете эти данные в темплей. Так как 3 API вам надо после клика по кнопке дать понять компоненту, какое API звать. Для этого в процесс перехода по роутингу нужно передать что-то, что даст понять компоненту, какое API звать. Делается это через router params. В компоненте на основе этих переданных значений зовете то или иное API. Вариант второй, мне кажется более правильный. Дергать API в момент клика. Класть все данные в стор, и когда все это сделается - выполнять переход по роутингу, в котором передавать через params уже готовый массив с полученными товарами.
И не забудьте сделать кое какие проверки. Во-первых надо проверять, нет ли уже в store информации по категориям. Потому что если есть, зачем дергать АПИ еще раз? Достаточно будет просто перейти по руту и передать эти данные. Во-вторых надо проверять не находимся ли мы уж на этом самом роутинге. Если попросить vue router перейти по урл, на котором мы уже находимся - будет ошибка в консоль.
Как сделать так чтобы стоимость всех товаров в корзине отображалась в v-catalog возле кнопки перехода в корзину? Буду благодарен за ответ.
Bogdan Post вынесите тотал в store и отобразите
Моя версия мутации декремента с удалением елемента при достижении нуля:
DECREMENT: (state, index) => {
--state.cart[index].quantity < 1 && state.cart.splice(index, 1)
}
Ну, типа, зачем тянуться к отдельной кнопке, когда можно довести до нуля и сразу удалить. (Это будет бесить тех, кто нажал просто лишний раз, но мы же учимся, да)))
Одна проблема: я хотел бы не дублировать код уже готовой мутации удаления, а вызвать ее саму (что невозможно) или позвать на помощь легитимный экшн. Как бы это сделать?
А в чем проблема вызвать мутацию?
@@gofrontend2220
DECREMENT_CART_ITEM({ commit }, index) {
commit("DECREMENT", index);
commit("REMOVE_FROM_CART", index);
},
Спасибо за видео! Скажите, пожалуйста как можно реализовать подсчет количества не с помощью "+" и "-", а через поле ввода, чтобы пользователь сразу мог ввести необходимое количество?
Kamil Fataliev через input с v-model. Надо передавать будет введенное значение в action, оттуда в мутацию и прописывать это значение для ключа quantity в объекте товара в корзине. То есть не просто делаем quantity- - или ++, а quantity = значение, переданное из инпута
Go Frontend а как передать само значение в action? В документации не совсем понятно написано, мы как-то можем обращаться в action к data компонента ?
Kamil Fataliev this.$store.dispatch(“actionName”, valueFromInput). Или если чере мапэкшены еще проще this.actionName(value). Передается в момент вызова экшна. Читайте лучше документацию там все написано
@@gofrontend2220 получилось сделать все намного проще, в v-model указал наше значение quantity, а в мутации просто оставил state.cart[index]quantity не присваивая ему ничего, оказывается v-model двунаправленный. А вам еще раз спасибо, что помогаете!)
Добрый день. Подскажите пожалуйста, как сделать так ,чтобы в корзине из каталога ,показывалось общее количество товара, а не количество наименований (индексов)
Dinar Nigmatullin не очень понял
@@gofrontend2220 Есть ли у вас онлайн курсы или может какой нибудь более удобный способ связи, кроме TH-cam?Очень нравится ваша подача материала, но боюсь вопросами вас тут закидаю
Как исправить баг? Если не заходишь в корзину и сразу добавляешь товары, то когда заходишь в корзину quantity всех товаров = NaN
Дмитрий Купчик под следующим уроком в описании я указал как надо:)
Щелчки на заднем фоне раздражают... Как будто кто-то сидит сзади и орехи щелкает
у меня что то не работает
с огромным удовольствием поставил дизлайк, потому что:
1. суммарно за все шереховатости по видео с курса
2. пока не понятно автор планирует ли дальше жечь, но путаться так нельзя. Иначе первый раз такое делающие теряют поток понимания что случилось. Я два раза пересматривал.
3. автор у вас большие перспективы, как у годного препода, но пишите сценарий, не обработанное не кидайте на канал. Если планируете серьезно на Ютубе обосноваться.
Вот такие видео с косямами можно выделить в отдельные стримы, лично мне доставляет удоворльствие смотреть на дебаг, лайвкодинг, но процессу обучения мешает.
4. Надеюсь, вы не обидетесь. Спасибо за годный канал.
Бахнул так
cartTotalCost() {
return this.cart.map(el => Math.floor(el.price) * el.quantity).reduce((acc, el) => acc = acc + el, 0);
}
спасибо тебе братишка