Javascript и Vuejs для Laravel 34. Vuex, state, actions, getters, mutations. Show компонент с Vuex

[@sam_korsh]

реально через чур магическое, прям колдовство какое-то🧙‍♂

[@vimitali7630]

Спасибо, за продолжение!

[@laravelcreative]

Благодарю!)

[@alexeyguch816]

Благодарю за туториал! =)

[@testo5409]

Спасибо за курс! 14:50 разве не нужно state прокидывать - person: (state) => state.person

[@тв788о-л9ы]

В React State как то проще устроен, хотя другие вещи менее прозрачны. Дело вкуса наверное. Спасибо за материал подробный!

[@laravelcreative]

Да) Благодарю!)

[@karlengels4956]

ну хз. Там вышел redux-toolkit да, с которым намного проще стало писать, но энивей vuex как-то проще и понятнее. Это мнение чисто начинающего

[@igorsss5810]

это чем еще проще?

[@sergeyinshin4924]

Если выдает ошибку "TypeError: commit is not a function", решение: const actions = { getPerson(context, id) { axios.get(`/api/people/${id}`) .then( res => { context.commit('setPerson', res.data.data); }) } }

[@sergeyinshin4924]

в конце выдавало ошибку: person: () => state.person сработало: person: state => state.person

[@ЯрославАндроид-й7ч]

Спасибо, круто

[@laravelcreative]

Благодарю!)

[@alexandr9900]

камент для продвижения

[@spitzer4077]

После вчерашнего шока от ознакомления Vuex сегодня всё срослось. Поменялось прежде всего то что PHPStorm начал распознавать синтаксис Vuex при вчерашней (!) настройке, т.е. сразу после установки PHPStorm игнорил Vuex, так же не было вкладки Vuex в расширении Vu Devtools (тоже появилась).. скорее всего надо перезапустить шторм или пк после установки vuex, установил 3.6.2 (руками в package.json пописываем) вместо 4.0.2 которая с руганью ставится общей npm командой установки. Вообще, здесь не мешало бы более подробно установится на казусах установки, и в который раз понимаю что было бы ккууудддааа информативнее изображать такие вот структуры майнкартами, схемами, блоксхемами со стрелками и т.д. что бы в голове сразу рисовалась визуальная структура работы.. Автор сделал акцент что помимо собственно подключения экшнов у vuex есть доп. синтаксис с заклинаниями из хогвардва, было б здорово на них упор сделать.. А так же показать вариант "прямого" выноса в отдельный файл и подключения того же что подключали из vuex на примере Show - сразу будет понятна польза vuex если таковая есть

[@laravelcreative]

Благодарю!)

[@ПонтелеймонКотлеткин]

Спасибо за совет с 3.2.6 Сделал флагами, чтобы 4-я установилась без ворнингов и интересно, что микс успешно всё собирал при запущенном watch. Но пока не понизил версию, .$store просто не цеплялся в show.vue и соответственно все ломалось в консоли.

[@spitzer4077]

@@ПонтелеймонКотлеткиндело было год назад, уже ничерта не помню шо там было ))))

[@ДмитрийПавлейчик]

Добрый день! подскажи, пожалуйста, почему после мутации выдает null? state() { return { person: null, } }, getters: { person: state => { return state.person } }, actions: { getPerson({commit}, id) { axios.get(`/api/people/${id}`) .then(res => { console.log(res.data.data); // получается объект commit('increment', res.data.data) }) }, }, mutations: { increment(state, person) { console.log(state.person); // тут NULL state.person = person } },

[@ramazanstudy570]

ты не обернул этот код в объект?

[@ramazanstudy570]

и вообще посмотри свой state, там твой person изначально null а console.log(state.person) В inctrement, ты вызываешь до изменения самого Person наверное поэтому он null попробуй так: increment(state, person) { state.person = person console.log(state.person); }

[@ramazanstudy570]

import axios from "axios"; export default { state: () => ({ person: {}, }), getters: { person: (state) => state.person, }, mutations: { setPerson(state, person) { state.person = person; }, }, actions: { getPerson({ state, commit, dispatch }, id) { axios.get(`/api/people/${id}`) .then(person => { commit('setPerson', person.data.data) }); }, }, } У меня работает так

[@geniygames4620]

Получилось только с помощью Pinia, непросто для понимания но намного проще чем Vuex

[@nieeonliv]

Очень классные курсы! У кого ошибка из за за файла person.js Добавить в конец export default [ state, getters, mutation, actions ];

[@laravelcreative]

Благодарю!)

[@dmitriivanov7010]

Обратите внимание, тут должны быть Усатые скобки!!! Не квадратные.

[@ВасилийЛомов-п2г]

не знаю, как по мне сильно трудно, ни чего не понятно. хоть и пересмотрел 2 раза(

[@laravelcreative]

Да ладно) Я тоже не сразу въехал, когда первый раз это учил) Больше упорства!

[@ВасилийЛомов-п2г]

@@laravelcreative если честно иду дальше по вашему курсу. Уже смотрю jwt. Просто наверное все новое пугает

[@sam_korsh]

у кого ошибка Uncaught (in promise) TypeError: commit is not a function, нужно при передачи commit в getPersone обернуть commit в усатые скобки const actions = { getPerson({commit}, id){ axios.get(`/api/people/${id}`) .then( res => { commit('setPerson', res.data.data) } ) }, }

[@BookwormYevgen]

У кого с конфигурацией vuex из видео не получается : ///////////////////// / index.js: / //////////////////// import { createStore } from 'vuex'; import Person from './modules/person' const store = createStore({ modules: { Person } }) export default store ///////////////////// / app.js: / //////////////////// import store from "./store"; app.use(store)