Vuex против простых общих данных
Есть ли что-то, что может сделать Vuex, чего не может сделать следующий простой общий магазин? -
let store = {
user: {
name: 'John Doe'
}
};
new Vue({
el: '#app-one',
data: {
bar: 'foo',
shared: store
}
});
new Vue({
el: '#app-two',
data: {
foo: 'bar',
shared: store
}
});
Если да, то каковы эти распространенные варианты использования?
Ответы 1
В глубине души хранилище Vuex - это просто реактивный объект Vue, который вы добавляете.
Поэтому, если вы будете использовать только state из магазина Vuex через прямой доступ, тогда оба подхода будут работать одинаково.
Дело в том, что если во Vuex вы напрямую используете только state, вы в значительной степени недостаточно используете этот инструмент. Вы платите цену, но не получаете выгоды.
У Vuex есть геттеры, которые похожи на повторно используемые вычисляемые свойства. Они также позволяют отделить ваши приложения от внутренней структуры состояния магазина.
Vuex имеет модули / пространства имен, которые позволяют вам разбивать код вашего магазина и лучше организовывать его по мере его роста.
У Vuex также есть действия и мутации. Действия позволяют создавать «методы», которые могут повторно использоваться любым экземпляром (или компонентом) Vue, использующим хранилище. Еще одна важная вещь - действия и мутации обеспечивают соблюдение «протокола», который также поможет вам лучше организовать ваш код и, что наиболее важно, поможет вам отлаживать вашего кода легче, когда что-то станет проблематичным (и они будут, если ваше приложение вырастет достаточно).
Например, рассмотрим приложение, в котором многие точки приложения меняют один и тот же бит состояния. Учтите также, что некоторые из этих изменений выполняются асинхронно. Используя Vuex, вы знаете, что любая асинхронная операция выполняется внутри действий, поэтому, если у вас есть проблема «гонки», источник проблемы должен быть там. В Vuex вы также знаете, что в конечном итоге изменения состояния выполняются при мутации Только (и синхронно). Так что, если что-то станет безумным, вы всегда можете установить точку останова на этой мутации и выяснить, что, черт возьми, ее вызывает. Если вы не используете Vuex в любом достаточно большом приложении, изменения будут происходить из слишком большого количества мест и слишком часто, что в конце концов сделает вашу жизнь не такой простой.
Да, я все еще не понимаю. Чем Vuex отличается от «глобального» объекта, возможно, с некоторыми методами, обеспечивающими то, что вам нужно. В документации Vuex рекомендуется использовать этот подход, пока вы не узнаете, что вам понадобится Vuex (это как очки, вы будете знать, когда они вам понадобятся). Я все еще не в этом. Я не видел ничего, что бы за меня не решал простой глобальный объект.