Нормального контента днем с огнем не найти на просторах рунета. Огромная благодарность за труд. Я новичок и мне круто зашло, думаю Ниндзя не одобрит, да и пёс с ним))) Лайк, подписка.
на 14 минуте забыл сказать , что в файле router.js нужно также прописать новые пути файлов , которые мы поместили в отдельные папки cart и catalog . То есть написать надо вот так : import vCatalog from '../components/catalog/v-catalog' и import vCart from '../components/cart/v-cart'
Спасибо большое за уроки! одно из лучших объяснений про vuex. у меня вопрос: а если этот проект сбилдить и залить на сервер, а база данных у нас, к примеру эти же товары созданы в таблице mysql, как к ней подключиться и слать запросы?
Andrey Ageev спасибо:) запросы слать так же через rest-api, только вот эти запросы надо будет как то дополнительно обрабатывать бекендом. Я в бекенде ноль:)
О структуре VUEX объяснено неверно, и при такой структуре вы потом в каждом модуле Action и прочего утоните, программисты замучаются что-то в них искать. Есть нормальная рабочая структура которую дали сами VUE: vuex.vuejs.org/ru/guide/structure.html - этого достаточно, чтобы не делать проект из бесполезных вложений. Модули - это наборы методов, а не куски от этих наборов. В модуле сразу должны лежать state и прочее, для нормального понимания что делает модуль. А то хранилище у вас в главном файле, а всё остальное размотано по папкам. Те кто учатся НЕ ДЕЛАЙТЕ ТАК!
Привет, ролик записывался 9 месяцев назад, а декомпозиция на "module state" добавлена только пол года назад, если я не ошибаюсь. Но в любом случае модули выглядят организованнее - это правда.
В магазине есть косяк, если добавить товар в корзину например T-shirt 1 5штук и потом удалить его из корзины, то потом если снова нажать купить один раз удалённый товар T-shirt 1, то в корзину падает снова 5 штук удалённых, а не одна единица товара
ВАЖНО! На примерно 10 минуте в корзину упадет товар с NAN вместо количества (спасибо подписчику, что нашел баг). Чтобы этого не было, надо конструкцию this.$set(this.cart_item_data, 'quantity', 1) перенести из хука mounted компонента v-cart-item в хук mounted компонента v-catalog-item. Только замените cart_item_data на product_data.
ДОбрый день, спасибо за урок. Но я наткнулся на непонятную для меня вешь. Если удалить товар из корзины в любом его количестве. а затем снова нажать купить из каталога . то в корзине повявится товар в том количевсве которм его удаляли.
Очень не хватает разбора использования на практике vuex moduls. Судя по документации, удобная вещь. Как я понял, вариант разделить разделить state на модули что бы всё не хранить в одном файле
Пофиксил и залил в репозиторий. Нужно из компонента v-cart-item перенести всю конструкцию из хука mounted и поместить в хук maunted только в компоненте v-catalog-item. Только не забыть сменить cart_item_data на product_data. Проблема в том, что мы добавляли свойство quantity к объекту товара когда клали его в корзину. И при быстром клике по Add to cart, vue не успевал добавлял это свойство к объекту и отдавал NAN на количестве. Я постараюсь сегодня записать баг-фикс-видео и выложить, чтоб не было вопросов :) Огромное спасибо, что нашли этот баг!
@@gofrontend2220 не работает, если при пустой корзине нажать несколько раз Add to cart, всё равно будет NaN. Но если к уже добавленному товару нажимать Add to cart, то тогда добавляет корректно.
@@gofrontend2220 При каждом переходе в catalog(кроме первичной загрузки) у объектов пропадает count, т.е. mounted в v-catalog-item отрабатывает только один раз, и далее при повторном вызове SET_PRODUCTS_TO_STATE у объектов пропадает count. Решил так: удалил mounted из v-catalog-item и обогатил данные на входе. GET_PRODUCTS_FROM_API({commit}) { return axios('localhost:3000/products', { method: 'GET' }) .then((products) => { // добавляем количество к объекту products.data.map((item) => { item.count = 1; }); commit('SET_PRODUCTS_TO_STATE', products.data) return products; }) .catch((error) => { console.log(error); return error; }) }
Друзья, я правильно понял, что на эnтом стеке node+vue, при переходе по ссылками страницы непезагружаются? но урл добавляется. Как поисковики такое индексируют? Есть проблемы? Тонкости?
Для индексации поисковиком нужно использовать SSR(Server side rendering). Есть замечательный фреймворк Nuxt.js для SSR на vue. Советую посмотреть видео про Nuxt.js Владилена Минена
Cтолкнулся с проблемой названия компонента. в части template я могу использовать или , а другой компонент только . Если напишу в kebep-case то будет ругаться линтер: _The "vFirstScreen" component has been registered but not used_ - почему один могу как угодно писать, а другой только в camel-case? Импортировал две штуки: _import vCatalog from '@/components/v-catalog' _ и _import vFirstScreen from '@/components/v-firstscreen'_ Объявил оба: _components: { vCatalog, vFirstScreen }_
@@gofrontend2220 :3000/products:1 Failed to load resource: net::ERR_CONNECTION_REFUSED сначала все запустилось и работало а сейчас вот так выдает все пробовал все равно так же
лично для меня главная проблема VUE(и остальных), что ты просто запутываешься нахрен во всех этих методах, свойствах, гетерах, сетарах, мутациях хреняциях, привязках, прокидываньях пропсов и т.д., блин бэкенд фреймворки куда более понятны, логичны и просты для восприятия
![[ВАЖНО - Читай описание] Универсальный компонент Слайдер (carousel) на Vue.js без плагинов!](http://i.ytimg.com/vi/ak61Y4-lGsQ/mqdefault.jpg)
![[ВАЖНО - Читай описание] Универсальный компонент Слайдер (carousel) на Vue.js без плагинов!](/img/tr.png)
![[ВАЖНО - Читай описание] Почему вы просто обязаны использовать VUEX в своем приложении!](http://i.ytimg.com/vi/5lBf-Fm4io4/mqdefault.jpg)
![[ВАЖНО - Читай описание] Vue.js компонент всплывающее модальное окно используя SLOT и $REFS](http://i.ytimg.com/vi/QWovG8nVbnA/mqdefault.jpg)
Спасибо за курс! несовместимостей с vue3 практически не было
Здравствуйте! А в чем были расхождения? Как Вы их решили? То есть эти уроки и сейчас актуальны несмотря на предупреждение? Спасибо
Замечательная сборка. Вы очень хорошо объясняете. Продолжайте в том же духе ))
Спасибо:)
да, отлично объясняет
Спасибо за урок.
- попробуйте @ - дает возможность двигаться от корня
спасибо, помогло
спасибо!
с такими статичными путями проще, чем переписывать потом относительные
Всё очень понятно. Каждый шаг объяснён. Спасибо автору!
Спасибо за полезный курс! В рунете критически мало толковых записей по vue, так что продолжайте обязательно.
Большое спасибо за ваш курс, он крут. Думаю, со мной согласятся, ждем продолжения, еще курсов по VUE!)
Благодарю за данную серию уроков, много чего подчерпнул из них.
Спасибо! По рефакторингу очень доходчиво и про важное.
Пожалуйста, не останавливайся) оч круто, спасибо. Нужно просмотреть все)
Отличный курс, на одном дыхании, за утро воскресенья. Завтра все перепишу у себя :) спасибо, пишите еще по vue
Bas Tarann рад слышать:)
Нормального контента днем с огнем не найти на просторах рунета. Огромная благодарность за труд. Я новичок и мне круто зашло, думаю Ниндзя не одобрит, да и пёс с ним))) Лайк, подписка.
Все очень круто, было бы также интересно увидеть работу с cookies на vue!
Антон. спасибо за труды, очень полезные видео)
на 14 минуте забыл сказать , что в файле router.js нужно также прописать новые пути файлов , которые мы поместили в отдельные папки cart и catalog . То есть написать надо вот так : import vCatalog from '../components/catalog/v-catalog' и import vCart from '../components/cart/v-cart'
А так все круто! Спасибо большое за уроки
ALEXANDERXP спасибо за замечание:)
в ide наверно установлен рефакторинг путей, я тоже переписывал в router.js
@@GeliosGarik Да, скорее всего. Но для остальных зрителей канала, это знать полезно
Thanks for a good lesson and good explanation )))
Спасибо большое за уроки! одно из лучших объяснений про vuex.
у меня вопрос: а если этот проект сбилдить и залить на сервер, а база данных у нас, к примеру эти же товары созданы в таблице mysql, как к ней подключиться и слать запросы?
Andrey Ageev спасибо:) запросы слать так же через rest-api, только вот эти запросы надо будет как то дополнительно обрабатывать бекендом. Я в бекенде ноль:)
Отличная история!
О структуре VUEX объяснено неверно, и при такой структуре вы потом в каждом модуле Action и прочего утоните, программисты замучаются что-то в них искать. Есть нормальная рабочая структура которую дали сами VUE: vuex.vuejs.org/ru/guide/structure.html - этого достаточно, чтобы не делать проект из бесполезных вложений. Модули - это наборы методов, а не куски от этих наборов. В модуле сразу должны лежать state и прочее, для нормального понимания что делает модуль. А то хранилище у вас в главном файле, а всё остальное размотано по папкам. Те кто учатся НЕ ДЕЛАЙТЕ ТАК!
Очень правильный совет, всем на заметку.
Привет, ролик записывался 9 месяцев назад, а декомпозиция на "module state" добавлена только пол года назад, если я не ошибаюсь. Но в любом случае модули выглядят организованнее - это правда.
Можно, пожалуйста, добавить в описание к видео ваш чеклист, по которому вы проходитесь? Спасибо огромное за ваши видео!
В магазине есть косяк, если добавить товар в корзину например T-shirt 1 5штук и потом удалить его из корзины, то потом если снова нажать купить один раз удалённый товар T-shirt 1, то в корзину падает снова 5 штук удалённых, а не одна единица товара
во втором пункте ошибка, принято использовать PascalCase.
NaN в корзине когда несколько раз нажимаешь "add Cart"
ВАЖНО! На примерно 10 минуте в корзину упадет товар с NAN вместо количества (спасибо подписчику, что нашел баг). Чтобы этого не было, надо конструкцию this.$set(this.cart_item_data, 'quantity', 1) перенести из хука mounted компонента v-cart-item в хук mounted компонента v-catalog-item. Только замените cart_item_data на product_data.
ДОбрый день, спасибо за урок. Но я наткнулся на непонятную для меня вешь. Если удалить товар из корзины в любом его количестве. а затем снова нажать купить из каталога . то в корзине повявится товар в том количевсве которм его удаляли.
Спасибо! Интересно и полезно!
отличный курс для новичка , я всё понял. а владилен минин не разжевывает
! ВАЖНО - Читайте описание к видео ! 🔥🔥🔥👆👆👆
спасибо большое. Мега полезно
Очень не хватает разбора использования на практике vuex moduls. Судя по документации, удобная вещь. Как я понял, вариант разделить разделить state на модули что бы всё не хранить в одном файле
да, такое видео было бы очень полезно
заслуженный лайк
11:10 получаем NAN если с каталога добавляем товар больше 1 шт, если по одному каждого товара, то всё в порядке.
Значит какая-то бага в мутации добавления товара. Вечером пофиксю и обновлю репозиторий
Пофиксил и залил в репозиторий. Нужно из компонента v-cart-item перенести всю конструкцию из хука mounted и поместить в хук maunted только в компоненте v-catalog-item. Только не забыть сменить cart_item_data на product_data. Проблема в том, что мы добавляли свойство quantity к объекту товара когда клали его в корзину. И при быстром клике по Add to cart, vue не успевал добавлял это свойство к объекту и отдавал NAN на количестве. Я постараюсь сегодня записать баг-фикс-видео и выложить, чтоб не было вопросов :) Огромное спасибо, что нашли этот баг!
@@gofrontend2220 не работает, если при пустой корзине нажать несколько раз Add to cart, всё равно будет NaN. Но если к уже добавленному товару нажимать Add to cart, то тогда добавляет корректно.
@@gofrontend2220 При каждом переходе в catalog(кроме первичной загрузки) у объектов пропадает count, т.е. mounted в v-catalog-item отрабатывает только один раз, и далее при повторном вызове SET_PRODUCTS_TO_STATE у объектов пропадает count.
Решил так: удалил mounted из v-catalog-item и обогатил данные на входе.
GET_PRODUCTS_FROM_API({commit}) {
return axios('localhost:3000/products', {
method: 'GET'
})
.then((products) => {
// добавляем количество к объекту
products.data.map((item) => {
item.count = 1;
});
commit('SET_PRODUCTS_TO_STATE', products.data)
return products;
})
.catch((error) => {
console.log(error);
return error;
})
}
@@isopp7744 дружище, спасибо, всё перепробовал, но только твой способ сработал
Друзья, я правильно понял, что на эnтом стеке node+vue, при переходе по ссылками страницы непезагружаются? но урл добавляется. Как поисковики такое индексируют? Есть проблемы? Тонкости?
Для индексации поисковиком нужно использовать SSR(Server side rendering). Есть замечательный фреймворк Nuxt.js для SSR на vue. Советую посмотреть видео про Nuxt.js Владилена Минена
@@redhook777 спасибо!
Здравствуйте. Очень нужна ваша помощь
Как сделать ,чтобы после обновления страницы данные из корзины не стирались ?
Сделать реальное апи и хранить все на сервере:) это не ко мне
👍
Cтолкнулся с проблемой названия компонента. в части template я могу использовать или , а другой компонент только .
Если напишу в kebep-case то будет ругаться линтер: _The "vFirstScreen" component has been registered but not used_ - почему один могу как угодно писать, а другой только в camel-case?
Импортировал две штуки: _import vCatalog from '@/components/v-catalog'
_ и _import vFirstScreen from '@/components/v-firstscreen'_
Объявил оба: _components: {
vCatalog, vFirstScreen }_
Garik Gelios не vFirstScreen, а vFirstscreen. Большие буквы там, где идет прерывание сплошного текста
@@gofrontend2220 :3000/products:1 Failed to load resource: net::ERR_CONNECTION_REFUSED
сначала все запустилось и работало а сейчас вот так выдает все пробовал все равно так же
пробовал и через оперу и через едж и хром
одно и тоже
Роман Дорохин json-server -watch db.json надо каждый раз писать в консоли
Go Frontend я и так пишу
лично для меня главная проблема VUE(и остальных), что ты просто запутываешься нахрен во всех этих методах, свойствах, гетерах, сетарах, мутациях хреняциях, привязках, прокидываньях пропсов и т.д., блин бэкенд фреймворки куда более понятны, логичны и просты для восприятия
Prеаchеr по началу. Потом все понятно и просто становится