Vuex против простых общих данных

Question

Есть ли что-то, что 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
    }
 });       

Если да, то каковы эти общие случаи использования?

Answer 1

В глубине души хранилище Vuex - это просто реактивный объект Vue, который вы добавляете.

Так что, если вы используете state магазина Vuex только через прямой доступ , тогда оба подхода работают одинаково.

Дело в том, что если в Vuex вы используете только state напрямую, вы в значительной степени недооцениваете этот инструмент. Вы платите цену, но не получаете выгоды.

В Vuex есть геттеры, которые похожи на вычисляемые свойства многократного использования. Они также позволяют вам отделить ваши приложения от внутренней структуры состояния магазина.

Vuex имеет модули / пространства имен, которые позволяют разбить код вашего магазина и лучше организовать его по мере роста.

У Vuex также есть действия и мутации. Действия позволяют вам создавать «методы», которые могут использоваться любым экземпляром Vue (или компонентом), который использует хранилище. Другая важная вещь - действия и мутации, обеспечивающие «протокол», который также поможет вам лучше организовать ваш код и, что самое важное: поможет вам отладить ваш код легче, когда что-то становится проблематичным (и они будет, если ваше приложение вырастет достаточно).

В качестве одного примера рассмотрим приложение, в котором многие точки приложения изменяют один и тот же бит состояния. Учтите также, что некоторые из этих изменений выполняются асинхронно. Используя Vuex, вы знаете, что любая асинхронная операция выполняется внутри действий, поэтому, если у вас есть какая-либо проблема «гонки», источник проблемы должен быть там. В Vuex вы также знаете, что, в конечном итоге, изменения состояния вносятся только при мутациях * (и синхронно). Так что, если что-то сходит с ума, вы всегда можете установить точку останова на эту мутацию и выяснить, что, черт возьми, это вызывает. Если вы не используете Vuex в каком-либо достаточно крупном приложении, изменения будут происходить из слишком многих мест со слишком высокой скоростью, что в конце концов сделает вашу жизнь не такой легкой.