Аннотация:
Одностраничное приложение (SPA) обеспечивает масштабируемость и возможность повторного использования кода. В этой архитектуре у нас есть проблема, как мы можем передавать данные и обновлять данные между компонентами. Один из способов сделать это — создать пользовательские события и передать данные от дочерних компонентов родительскому компоненту. Еще один эффективный способ — использование библиотеки Vuex. Используя Vuex, мы можем хранить состояние компонента глобально и извлекать его прямо в компонент по мере необходимости, не проходя через иерархию компонентов. Мы можем избежать реализации prop Drilling и пользовательских событий для настройки связи между компонентами.
Как добавить Vuex в приложение Vue.js?
Сначала вам нужно установить Vuex, используя приведенную ниже команду npm. Если вы пользователь пряжи, вы можете использовать команду пряжи
npm install vuex@next — сохранить
установить Vuex с помощью Yarn
пряжа добавить vuex@next — сохранить
Vuex-поток
После установки Vuex вам нужно создать магазин. Store — это модуль, в котором мы храним наше состояние, мутации, действия, геттеры, модули.
Чтобы понять, как работает каждое свойство в магазине, обратитесь к блок-схеме ниже.
Основные концепции свойств Vuex
Штат:
Он реактивный, и мы передаем состояние нашему компоненту для отображения данных.
Мутации:
Чтобы изменить/обновить состояние, нам нужно зафиксировать мутацию. Вы можете изменить состояние без мутации, но мы не можем отследить, какое состояние события было изменено. Используя мутацию, мы можем отслеживать изменения состояния. Вы можете использовать «VueJs Dev tool» в качестве расширения для браузера, чтобы увидеть все мутации. Мутации являются синхронными, что означает, что если мы хотим обновить состояние, используя такие события, как щелчок, наведение и т. д., мы можем зафиксировать мутацию для обновления состояния.
Действия:
Действия являются асинхронными, то есть, если вы пытаетесь получить данные из API, вы можете отправить действие, которое фиксирует мутацию, и мутация обновит состояние.
Действия > Мутация > Состояние
Геттеры:
Getters — это свойство, которое напрямую взаимодействует с State. Если вы хотите формировать состояние в соответствии с вашими потребностями, вы можете создать Getter и сослаться на компонент.
Модули:
Модули можно использовать для разбивки одного большого магазина на маленькие. В этой статье мы не будем обсуждать модули, потому что наш магазин не будет таким большим, чтобы его пришлось разбивать.
Выполнение
Как показано ниже, давайте создадим хранилище для нашего приложения. Мы создаем приложение, состоящее из двух компонентов Tasks.vue (родительский компонент) и Task.vue (дочерний компонент). Основные функции этого приложения позволяют отправлять http-запросы к JSONPlaceholder API для получения задач. JSONPlaceholder — это бесплатная онлайн-служба REST API. Он предоставит нам макет данных. Мы также добавляем функцию удаления для каждой задачи, и после удаления состояние отдельной задачи должно обновиться.
Теперь мы создадим Task.vue (дочерний компонент), как показано ниже. Вы увидите, что deleteTasks() срабатывает по событию клика. мы извлекаем мутацию "DeleteTask" из хранилища, используя вспомогательный метод mapMutations([DeleteTask]) .
Когда вы нажимаете на значок удаления задачи
deleteTasks()методы срабатывают →, которые зафиксируютмутацию DeleteTask() → мутациябудет обновлятьState TaskLists: []
Теперь мы создадим Tasks.vue (родительский компонент). Здесь мы вызовем Task.vue(child component) . Мы будем вызывать действие mapActions(["fetchTasks"]), чтобы получить данные из JSONPlaceholderAPI . Пожалуйста, обратитесь к методу fetchTasks() под действием в магазине Vuex (как показано выше).
В хранилище Vuex методом fetchTasks() мы фиксируем мутацию→ pullTasks →, которая передает данные в stateTaskLists → мы извлекаем состояние и передаем его в updatedTasksList Getter → Таким образом, мы можем фильтровать задачу, когда мы удаляем задачу, и отображать новый обновленный список задач.
Окончательный результат будет выглядеть так, как показано ниже. Конечно, вы можете удалить столько задач, сколько захотите. Опять же, JOSNPlaceholder API предоставит макет данных, но вы можете использовать свой выбор API.
Если вам интересно узнать о стиле этого приложения, вы можете скачать его с моего Github.
https://github.com/njoshi07/Vuex-State-Management-Style-Sheet/blob/master/style.css
Вывод:
Используя Vuex в своем одностраничном приложении (SPA), мы можем избежать использования детализации свойств и пользовательских событий для настройки связи между иерархией компонентов.
Шаблон централизованного хранилища помогает более эффективно управлять состоянием приложения.
Ссылки:
Vuex:
API JSONPlaceholder:
