[Udemy] Vue.js 2 Recipes

подскажите, пожалуйста, кто в теме, где взять понятный курс/урок по VUEX , что б прямо на пальцах
2 месяца пытаюсь из разных источников узнать а все не как не догоню в систему
вроде все остальное понятно (более менее)
пару простых приложений и сайтов уже сделал, но мутации, экшены и геттеры никак не залезут в голову

 

Тупо на пальцах. Мутации это изменения переменной. Экшены, это события(например нажатие на кнопку) гетеры это просто обращение к переменной. Там нет ничего сложного. vuex или store это переменные, просто глобальные у которых есть состояния, это просто изменение переменной внутри store. Все. Изучается за 2 часа.

 

спасибо, за ответ, можно я немного еще уточню ?
зачем тогда и мутации и экшены,
я так понял что мутациями можно вообще не пользоваться а все изменения хранилища делать экшены
как я все это понимаю :
экшн это
аналог $emit (например нажали на кнопку, метод добавил значение в this.$store.someObj.someKey)
а геттер аналог $on (эту же переменную прочитали)
что делает мутация в этой ситуации?

 

Экшн означает, что произошло какое то конкретное событие (пользователь сам определяет, на какое событие какой экшн вешать). В экшне напрямую с хранилищем работать не стоит, это признак плохого тона. Все меняется через мутацию.

Предположим, мы хотим при загрузке страницы (или правильней будет сказать "при загрузке конкретного компонента") отправить запрос на сервер, что бы подгрузить какие-то данные. Мы берем, и в методе компонента mounted() пишем:

Код:

mounted(){
  this.$store.dispatch('loadFromServer');
}

Тут 'loadFromServer' - это название экшна, к которому мы обращаемся. Для того, чтобы в экшн передать параметр, нужно передать после названия экшна необходимый параметр.Например, мы пишем

Код:

mounted(){
  this.$store.dispatch('loadFromServer', this.$route.params.id);
}

В stor'e это будет выглядеть так:

Код:

state {
  singlePost: {}
}

// каждый экшн vue имеет по умолчанию первый аргумент context, которые имеет метод commit (это и есть функция, вызывающая мутации и передающая в нее необходимые параметры) и свойства state (состояние хранилища) и getters (геттеры хранилища)

actions: {

// аргумент id внутри loadFromServer - это то, что мы передали в this.$route.params.id в нашем компоненте
// 'setSinglePost' в первом параметре context.commit - это имя функции-мутации, которую мы вызываем
// {type: 'singlePost', post: post} - это объект, который будет передан в функцию мутацию setSinglePost. Тут мы указываем свойство state'а, которое хотим изменить (type: 'singlePost') и значение, которое мы хотим ему присвоить (post: post).

  loadFromServer(context, id){
    this.$http.get("/posts/"+id).then( response => {
      const post = response.data;

      context.commit('setSinglePost', {type: 'singlePost', post: post});
    })
  }
}

mutations: { // блок функций-мутаций

// каждая мутация первым параметром получает state хранилища
// а вторым параметром получает передаваемые из context.commit в нее данные. Назовем этот параметр payload

  setSinglePost(state, payload){
    state[payload.type] = payload.post; // т.е. тут получается state['singlePost'] = post
  }
}

Код очень груб и это больше грубый черновик, но приблизительно так изменяется состояние хранилища. Не из экшнов, а именно из мутаций. Некоторые привыкли имена мутаций задавать исключительно большими буквами, т.е. вместо setSinglePost пишется что то вроде SET_SINGLE_POST. Кому как нравится, строгих рекомендаций нет.

 

спасибо большое за разъяснение, пока понятнее не стало,
сейчас буду все это переписывать в проект и пробовать как-то взаимодействовать,
тут вы как раз и 2-ю мою головную боль немного осветили - это отправка json контента во что-то глобальное, когда json получен через промисы
и что-то мне подсказывает если разобраться с хранилищем, этот момент сам собой решится

 

да будет свет !!

Marsianinka

спасибо за то, что навели на мысль, я вроде понял суть, экшены запускают мутацию( соответсвенно и изменяют state), только когда заканчивается выполнение асинхронных операций, для этого они и нужны, если б не асинхрон, то было бы достаточно геттер-сеттер и все