Почему я должен использовать геттеры и мутации вместо получения / установки значений напрямую?

Question

В чем разница между:

this.currentLanguage = this.$store.getters.currentLanguage;

и этим для геттеров:

this.currentLanguage = this.$store.state.currentLanguage;

Также это:

this.$store.commit('setLanguages', this.languages);

дает мне те же результаты сэто в мутациях:

this.$store.state.languages = this.languages;

Я получаю то, что хочу в обоих случаях.И получить прямое значение проще, потому что мне не нужно писать геттер / мутацию.Почему я должен использовать геттеры / мутации?

Answer 1

Когда вы используете мутации, у вас есть четкая запись того, что изменилось в таких вещах, как vue-devtools.Это также позволяет отлаживать путешествия во времени.

Это действительно хорошо, когда вы отлаживаете.

Состояние против геттеров:намного больше серой области.Лично мне нравится не думать, что-то в state или getter.Если мне нужно get что-то из магазина, я использую getter.

Answer 2

На этот вопрос довольно хорошо ответили сами документы Vuex:

Опять же, причина, по которой мы совершаем мутацию вместо непосредственного изменения store.state.count, заключается в том, что мы хотим явно отслеживатьЭто.Это простое соглашение делает ваше намерение более явным, чтобы вы могли лучше рассуждать об изменениях состояния в вашем приложении при чтении кода.Кроме того, это дает нам возможность реализовать инструменты, которые могут регистрировать каждую мутацию, делать снимки состояния или даже выполнять отладку во времени.https://vuex.vuejs.org/guide/ - почти внизу

Таким образом, в основном идея состоит в том, чтобы явно отслеживать изменения.Это позволяет другим инструментам присоединяться к этим мутациям и действиям и отслеживать ваш код, что является огромным преимуществом для крупномасштабных приложений.Это также сделает ваш код более читабельным, а на более позднем этапе его будет намного проще обновить.Когда-либо читал в старом проекте, где они всегда менялись на ходу без единого «способа» сделать это - здесь этого не произойдет.

Answer 3

вам не нужно использовать геттеры в этом случае.Получатели подобны вычисляемым свойствам обычного компонента Vue, поэтому они нужны вам только тогда, когда данные являются более сложным потомком других данных.

однако вы хотите использовать мутации, потому что даже если выглядит, что this.$store.state.languages = this.languages работает, это не обязательно обновляет правильно .если у вас есть другие компоненты в зависимости от хранилища, он может не получить новые данные, потому что он не прошел полный процесс мутации.