Мутации и действия
Изменяйте состояние с помощью мутаций и асинхронных действий
«Мутации и действия» — бесплатный урок Vue Academy на CoddyKit. Это урок 2 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Vue Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Vue Academy содержит 3 уроков всего.
Безопасное изменение состояния
В Vuex нельзя напрямую изменять состояние из компонента. Вместо этого все изменения проходят через мутации. Такой единый явный путь позволяет отслеживать каждое изменение состояния и находить ошибки в Vue DevTools.
Что такое мутация
Мутация — это синхронная функция, которая получает текущее состояние и изменяет его. Мутации — единственное место, где разрешено изменять состояние.
mutations: {
increment(state) {
state.count++
}
}Мутации должны быть синхронными
Мутации должны выполняться синхронно. Если поместить асинхронный код, например сетевой вызов, внутрь мутации, DevTools не сможет отследить, когда именно изменилось состояние, и отладка с перемоткой во времени перестанет работать.
Фиксация мутации
Чтобы выполнить мутацию, зафиксируйте её по имени из компонента с помощью this.$store.commit.
methods: {
add() {
this.$store.commit("increment")
}
}Передача полезной нагрузки
Мутации принимают дополнительный аргумент, называемый полезной нагрузкой, который позволяет передать данные для изменения.
mutations: {
incrementBy(state, amount) {
state.count += amount
}
}
// commit with payload
this.$store.commit("incrementBy", 5)Полезная нагрузка в виде объекта
Для передачи нескольких значений используйте объект полезной нагрузки. Это понятнее и гибче, чем позиционные аргументы.
mutations: {
setUser(state, payload) {
state.user = { id: payload.id, name: payload.name }
}
}
this.$store.commit("setUser", { id: 1, name: "Ada" })Что такое действие
Действие отвечает за асинхронную работу и бизнес-логику. Действия не изменяют состояние напрямую, а вместо этого фиксируют мутации. Благодаря этому асинхронный код отделён от фактического изменения состояния.
Определение действия
Действие получает объект контекста. Из него можно зафиксировать мутации с помощью commit или получить доступ к состоянию.
actions: {
async fetchUser(context, userId) {
const res = await fetch("/api/users/" + userId)
const data = await res.json()
context.commit("setUser", data)
}
}Деструктуризация контекста
Для краткости часто деструктурируют commit непосредственно из контекста.
actions: {
async loadTodos({ commit }) {
commit("setLoading", true)
const res = await fetch("/api/todos")
commit("setTodos", await res.json())
commit("setLoading", false)
}
}Вызов действия
Компоненты запускают действия с помощью this.$store.dispatch, передавая необязательную полезную нагрузку. Вызов dispatch возвращает промис для асинхронных действий.
methods: {
async load() {
await this.$store.dispatch("loadTodos")
}
}Полный процесс
Полный цикл выглядит так: компонент запускает действие, действие выполняет асинхронную работу и фиксирует мутацию, а мутация изменяет состояние. Затем реактивное состояние автоматически обновляет пользовательский интерфейс.
Быстрая проверка
Проверьте свои знания о мутациях и действиях.
Повторение
Состояние изменяется только через мутации, которые выполняются синхронно и фиксируются с помощью commit. Асинхронная логика находится в действиях, запускаемых с помощью dispatch; когда действие готово, оно фиксирует мутации. Оба механизма принимают полезные нагрузки для передачи данных. Далее Вы добавите геттеры и разделите хранилище на модули.
Часто задаваемые вопросы
Урок «Мутации и действия» бесплатный?
Да — полный текст урока «Мутации и действия» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Vue Academy, подпишись на CoddyKit PRO. Курс Vue Academy содержит 3 уроков всего.
Чему я научусь в уроке «Мутации и действия»?
Изменяйте состояние с помощью мутаций и асинхронных действий Ты практикуешь Vue Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Vue Academy?
Предыдущий опыт не требуется. Vue Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 3.
Сколько времени занимает урок «Мутации и действия»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Vue Academy?
Да. Каждый урок Vue Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Основы Vuex
- Мутации и действия
- Геттеры и модули