Прочтите это, прежде чем переходить к Vuex.
Давайте копаться!
Прежде всего, мы хотим понять, почему мы должны использовать Vuex?
Что ж, когда вы начнете им пользоваться, у вашего приложения появится «централизованный магазин». «Черт возьми?» - спросите вы. Короче говоря, это глобальный магазин (idem per idem, верно?). Вышеупомянутый магазин отвечает за хранение желаемой информации в одном месте (доступном из любого места). Допустим, вы хотите сохранить какие-то данные, например, значение счетчика. Вы можете сделать это, передав его прямо в магазин.
Когда данные попадают в хранилище - они становятся состоянием. Ну а в каком состоянии тогда? По сути, это текущий рабочий статус данных приложения. Так что можно смело сказать - состояние - это совокупность данных, которые мы намеренно сохраняем. Надо сказать, что состояние - это объект!
У штата есть и более красивое название - единый источник правды. Это реализация подхода информационных систем. И это создает объект таким образом, что каждый ключ для определенного значения явно сохраняется только один раз.
Почему магазин глобальный? Вы можете торговать с ним из любого места вашего приложения. Значит, все ваши компоненты автоматически получат к нему доступ (он должен быть определен, но все же)! Да, мы говорим о двойном потоке информации. Ваши представления могут как извлекать информацию, так и сохранять ее. Конечно, вы решаете, какие части состояния будут использоваться - отдельный компонент может иметь разрешенный доступ только к части хранилища и, что эквивалентно, перезаписывать только определенные его части.
Забудьте о передаче состояния через props! Я не говорю, что вам не нужно время от времени передавать реквизит. Но представьте, что вы создаете приложение, которое обрабатывает 100 вложенных счетчиков, и все они используют одно и то же значение. Теперь у вас есть два варианта: передать реквизит сто раз или сохранить значение во Vuex.
Все вышесказанное подразумевает предсказуемое состояние - его поведение и функциональность являются постоянными / неизменными, если они не являются преднамеренными. С другой стороны, при использовании только props для управления состоянием в нашем приложении среднего / большого размера один может быть легко потерян.
Для лучшего понимания давайте разберем жизненный цикл Vuex. Мы воспользуемся простым примером, чтобы понять, как это работает.
Ради этого примера я мог бы использовать несколько новых определений - не волнуйтесь, я объясню их все в следующей главе. Я рекомендую пройти через эту главу еще раз после того, как вы познакомитесь с определениями.
Предположим, что мы работаем с полнофункциональным приложением Vue, используя Vuex - простой счетчик, который отображает текущий счетчик и имеет кнопку для увеличения значения. Прежде всего, мы хотим получить значение из Vuex, и для этого воспользуемся геттером. Несомненно, у нас есть компонент с привязанным к нему событием. Вызывая это событие, мы провоцируем ряд событий. Первый шаг в этой цепочке - запуск действия. Это вызывает мутацию, которая связана с инструментами Vue Dev. С другой стороны, мутация отвечает за мутацию магазина. Это означает, что он изменяет ту часть состояния, которую мы используем для загрузки информации о начальном значении счетчика. Когда мы внедряем Vuex во Vue, мы уверены в его реактивности. Поэтому, когда мы увеличиваем значение состояния - на экране появляется новое. Магия!
Итак, что предлагает Vuex?
Прежде всего - геттеры - рассматривайте их как экстракторы данных приложения. Типа вычисляемых свойств. Его результаты будут кешированы и будут повторно вычислены в любое время, когда часть их зависимостей изменится. Вы можете использовать их для доступа к определенной части состояния. Стоит отметить, что вы можете легко использовать их много раз, создавая свое приложение (такая экономия времени!). Конечно, геттеры сильно связаны с мутациями. Позвольте мне объяснить вам, почему.
Потому что нет состояния без мутаций! При совершении - выполняется часть логики, изменяющая состояние предсказуемым образом. Мутации - единственный способ установить или изменить состояние (так что никаких прямых изменений!), И, более того, - они должны быть синхронными. Это решение обеспечивает очень важную функциональность: мутации регистрируются в devtools. И это обеспечивает отличную читаемость и предсказуемость!
Еще одно - действия. Как уже было сказано, действия совершают мутации. Таким образом, они не меняют хранилище, и нет необходимости в том, чтобы они были синхронными. Но они могут управлять дополнительной частью асинхронной логики!
Как видите - все это имеет смысл.
Что мы получаем от всего этого?
Прежде всего - получаем шаблон для хранения данных. Хорошо продуманный.
Благодаря его структуре мы получаем довольно легкое для понимания и даже более легкое предсказание - глобальное состояние. Когда вы познакомитесь с жизненным циклом и тем, как шаблон работает с вашим видением приложения, вы почувствуете, что управлять и поддерживать свой код проще простого.
И, конечно же, способ обработки Vuex предоставляет нам очень мощные инструменты разработки, которые содержат не только список синхронно запускаемых мутаций, но и пару настроек для них. Что с этим делать? Ну и кое-что. Вы можете вернуться в определенное состояние - это мощная функция, которая позволяет вам отслеживать, как все меняется после активации мутаций. Более того, вы можете зафиксировать выбранную мутацию вручную и отменить ее. Это удобно, когда вы работаете над определенной частью кода и хотите сосредоточиться на конкретной миграции. Таким образом, вам не придется обновляться и проходить весь цикл.
Вы получаете единый источник правды, также называемый синглтоном глобального магазина! (так что вы получаете мощную вещь, которая тоже звучит великолепно) Почему она единственная - последствия реализации. Такая большая вещь. Объект, доступный для всего приложения. Тот, который не поддается, когда вы хотите изменить его другим способом, а не путем мутации.
Есть несколько способов регистрации магазина. Все зависит от ваших предпочтений и размера приложения. Я подробно объясню все это в следующих частях этого руководства!
И, конечно же, в результате всей концепции вы получаете то, за чем пришли. Простая связь между родительско-дочерними и дочерними-дочерними компонентами. Вам не нужно передавать какие-либо реквизиты или напрягаться, чтобы передавать данные вверх.
Просто помните о нескольких простых, но важных правилах:
1. синхронизм,
2. данные только для чтения,
3. единственный источник правды,
и вы готовы к работе! Удачи и приятного времяпровождения! :)
