0Pricing
Vue Academy · 课时

Mutations 与 Actions

使用 mutations 和异步 actions 修改状态

Mutations 与 Actions 是 CoddyKit 上的免费 Vue Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Vue Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Vue Academy 课程共包含 3 节课。

安全地更改 state

在 Vuex 中，您永远不会直接从组件修改 state。相反，所有更改都要经过变更。这条单一且明确的路径让每次状态变化都能在 Vue DevTools 中被追踪和调试。

什么是变更

变更是一个接收当前 state 并修改它的同步函数。变更是唯一允许修改 state 的地方。

mutations: {
  increment(state) {
    state.count++
  }
}

变更必须同步执行

变更必须同步运行。如果您将异步代码（例如网络调用）放入变更中，DevTools 就无法追踪 state 实际发生变化的时间，从而破坏时间旅行调试。

提交变更

要运行变更，请在组件中使用 this.$store.commit按名称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" })

什么是操作？

操作负责处理异步工作和业务逻辑。操作本身不会更改状态，而是提交变更。这样可以将异步代码与实际的状态变更分离开来。

定义操作

操作会接收一个上下文对象。您可以通过它提交变更或访问状态。

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 触发操作，并可传入有效载荷。分发异步操作会返回一个 promise。

methods: {
  async load() {
    await this.$store.dispatch("loadTodos")
  }
}

完整流程

完整流程是：组件分发一个操作，操作执行异步工作并提交一个变更，变更再更改状态。随后，响应式状态会自动更新界面。

快速检查

测试您对变更和操作的理解。

回顾

状态只能通过变更来修改，变更是同步的，并使用 commit 提交。异步逻辑位于操作中，通过 dispatch 分发，并在准备就绪后提交变更。两者都接受有效载荷来传递数据。接下来，您将添加获取器，并将存储拆分为模块。

常见问题解答

「Mutations 与 Actions」课时是免费的吗？

是的 — 「Mutations 与 Actions」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Vue Academy 课程的其余内容，请升级到 CoddyKit PRO。 Vue Academy 课程共包含 3 节课。

「Mutations 与 Actions」这节课中我会学到什么？

使用 mutations 和异步 actions 修改状态 你通过在浏览器中直接运行的动手代码来练习 Vue Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Vue Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Vue Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。

「Mutations 与 Actions」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Vue Academy 课中编写并运行代码吗？

能。每节 Vue Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. Vuex 基础
  2. Mutations 与 Actions
  3. Getters 与模块
← 返回 Vue Academy