Давайте сначала разберемся, что такое состояние?
💡Проще говоря, это текущие данные, которые нужны нашему компоненту для отображения на экране.
Мы можем обмениваться данными между компонентами, используя события и реквизиты.
Для большого приложения обработка этой древовидной структуры усложнится, поэтому мы можем перейти к управлению состоянием хранилища Vuex. Итак, здесь мы собираемся создать единое хранилище для поддержания состояния, т.е. единый источник достоверности.
🗃️ Магазин Vuex
Хранилище Vuex — это глобальное состояние, из которого каждый компонент может получить доступ к данным, и нет необходимости рассматривать верхние и нижние узлы дерева.
Если какой-либо компонент обновляет состояние, другие компоненты немедленно получат обновленное состояние.
что происходит, если многие компоненты пытаются изменить состояние?
Таким образом, в шаблонах управления состоянием используются термины Mutation и Actions.
⚙️ Мутации: его название предполагает, что он отвечает за изменение текущего состояния объекта.
📋 Действия: действие не должно изменять состояние напрямую, а должно вызывать мутации. Он может вызвать несколько мутаций.
⛏️ Геттеры: работает как вычисляемое свойство для магазинов.
Давайте возьмем пример, чтобы понять более ясно -
В нашем свойстве stare у нас есть ученики массива.
Ниже этого мутации setStudents позволяют нам обновлять массив учеников, который мы получим от вызова API в нашем действии ниже.
Затем в наших действиях у нас есть несколько шагов:
сначала мы делаем вызов API, затем фиксируем мутацию setStudents с текущим ответом API.
И мы получим обновленный ответ API, используя геттеры.
Надеюсь, единственный источник правды будет полезен для вас 😄
Дайте мне знать, если вам нужны другие статьи такого типа здесь 📪
