Vuex может решить множество проблем, но может быть и головной болью

Я собираюсь действительно упростить то, что такое Vuex. По сути, вы можете думать об этом как о гигантском объекте Javascript, который обозначает состояние вашего приложения. Каждый компонент имеет доступ к этому состоянию и может изменять его с помощью заранее определенных действий. Таким образом, вы всегда будете знать, как ваше приложение попало в определенное состояние.

Почему вам следует использовать Vuex

Хорошо, правда в том, что вам, вероятно, не следует всегда использовать Vuex.

Если ваше приложение небольшое, вероятно, лучше придерживаться ванильного паттерна Vue props и data. Каждый раз, когда вы добавляете Vuex в свое приложение, вы добавляете много шаблонного кода. Так что, если ваше приложение маленькое, отдача не так велика.

Однако по мере роста вашего приложения будет действительно полезно иметь проверенную на практике систему управления состоянием.

Как использовать Vuex

Давайте посмотрим, как работает Vuex, создав приложение todo.

Сначала я использую Vue CLI для создания нового проекта.

vue create vue-todo-app

Затем давайте установим Vuex.

npm i vuex

Обычно я создаю src/store.js файл, который будет содержать состояние нашего приложения.

Прямо сейчас он создает новое хранилище Vuex с массивом задач в качестве состояния.

Следующий шаг - где-нибудь отобразить эти задачи. Для этого редактирую компонент App.vue.

Я использую свойство computed, чтобы вытащить задачи из объекта состояния в компонент.

Затем я могу перебирать каждое задание так же, как в обычном приложении Vue.

Глядя на это в браузере, я вижу свой список дел! 🔥

Добавление элементов в список

Первое, что нам нужно сделать, это создать мутацию Vuex. Мутация - это функция, которая изменяет state.

В store.js добавляю следующее.

Теперь вы, вероятно, задаетесь вопросом, зачем вам добавлять мутацию. Не могли бы мы просто напрямую перевести задачи в состояние из компонента App.vue примерно так:

this.$store.state.todos.push(todo);

Мы действительно могли бы это сделать, и это сработает.

Но вы теряете все преимущества паттерна Vuex. С мутациями вы знаете точную историю системы и то, как система попала в определенное состояние.

Кроме того, всякий раз, когда вы напрямую редактируете состояние, каждый компонент может делать это непредсказуемым образом.

По моему опыту, когда нет стандартных undefined ошибок, они не за горами.

Короче говоря: используйте мутации!

Давайте интегрировать мутацию в наш App.vue компонент.

Я добавил новое поле ввода и привязал к нему свойство message.

Всякий раз, когда пользователь нажимает клавишу ВВОД, Todo фиксируется в хранилище с помощью метода this.$store.commit.

Используя Vue devtools, мы также можем проверить состояние Vuex. Это очень полезно при отладке вашего приложения.

В этом случае мы видим, что новая мутация ADD_TODO находится в списке.

Действия Vuex

Есть одна вещь, которую мы еще не рассмотрели, и это действия Vuex.

Мутация должна быть очень простой, она должна изменять состояние и больше ничего не делать.

Действие Vuex может делать гораздо больше. Предположим, мы хотим подключить наше приложение todo к API, в котором хранится состояние системы.

Обычно мы вызываем API из нашего App.vue компонента, но Vuex рекомендует нам применить все это в действии.

На самом деле я не создавал postRequestToTheAPI() функцию, это просто пример того, как она будет работать.

Затем вы можете запустить это действие с помощью функции dispatch.

this.$store.dispatch('addTodo', this.todo);

Вывод

Это все! Мы рассмотрели, что такое Vuex и когда его использовать.

Затем мы создали простое todo-приложение с использованием Vuex и поговорили о том, как синхронизировать его с серверным API.

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

Удачного кодирования! 👨‍💻