编辑“︁Vuex Actions”︁（章节）

= Vuex Actions =

== 介绍 ==
'''Vuex Actions''' 是 Vuex 状态管理库中用于处理异步操作和复杂业务逻辑的核心机制。与 [[Vuex Mutations|mutations]] 不同，actions 不直接修改状态，而是通过提交 mutations 来间接修改状态。这使得 actions 非常适合处理 API 请求、定时任务或其他异步操作。

Actions 的特点：
* 可以包含任意异步操作（如 API 调用）
* 通过 <code>commit</code> 方法触发 mutations
* 通过 <code>dispatch</code> 方法调用其他 actions
* 接收一个与 store 实例具有相同属性和方法的 <code>context</code> 对象

== 基本语法 ==
以下是一个简单的 action 定义：

<syntaxhighlight lang="javascript">
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    incrementAsync (context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  }
})
</syntaxhighlight>

调用 action 的方式：
<syntaxhighlight lang="javascript">
// 在组件中
this.$store.dispatch('incrementAsync')

// 使用 mapActions 辅助函数
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions(['incrementAsync'])
  }
}
</syntaxhighlight>

== 参数传递 ==
Actions 可以接受额外参数（payload）：

<syntaxhighlight lang="javascript">
actions: {
  addTodo (context, todoText) {
    // 模拟 API 调用
    api.addTodo(todoText).then(() => {
      context.commit('addTodo', todoText)
    })
  }
}

// 调用时传递参数
this.$store.dispatch('addTodo', 'Learn Vuex actions')
</syntaxhighlight>

== 组合 Actions ==
Actions 可以返回 Promise，使得它们可以方便地组合：

<syntaxhighlight lang="javascript">
actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}
</syntaxhighlight>

== 实际应用案例 ==
=== 用户登录流程 ===
以下是一个完整的用户登录 action 示例：

<syntaxhighlight lang="javascript">
actions: {
  async login({ commit }, credentials) {
    try {
      commit('setLoading', true)
      const response = await authApi.login(credentials)
      commit('setUser', response.data.user)
      commit('setToken', response.data.token)
      commit('setLoading', false)
      router.push('/dashboard')
    } catch (error) {
      commit('setError', error.message)
      commit('setLoading', false)
    }
  }
}
</syntaxhighlight>

=== 购物车操作 ===
处理购物车商品添加的复杂逻辑：

<syntaxhighlight lang="javascript">
actions: {
  addToCart({ state, commit, dispatch }, product) {
    // 检查库存
    if (product.inventory <= 0) {
      return dispatch('showNotification', 'Product out of stock')
    }
    
    // 检查是否已存在
    const cartItem = state.cart.find(item => item.id === product.id)
    if (cartItem) {
      commit('incrementItemQuantity', cartItem)
    } else {
      commit('pushItemToCart', { ...product, quantity: 1 })
    }
    
    // 更新库存
    commit('products/decrementInventory', product.id, { root: true })
  }
}
</syntaxhighlight>

== 最佳实践 ==
1. '''保持 actions 精简'''：将复杂逻辑拆分为多个 actions
2. '''处理错误'''：始终捕获并处理异步操作中的错误
3. '''命名空间'''：在大型应用中使用模块和命名空间
4. '''可测试性'''：设计易于测试的 actions

== 常见问题 ==
=== Actions 和 Mutations 的区别 ===
{| class="wikitable"
|-
! 特性 !! Actions !! Mutations
|-
| 同步/异步 || 可以包含异步操作 || 必须是同步的
|-
| 调用方式 || <code>dispatch</code> || <code>commit</code>
|-
| 状态修改 || 不直接修改状态 || 直接修改状态
|}

=== 何时使用 Actions ===
* 需要与后端 API 通信时
* 需要执行多个 mutations 时
* 需要处理复杂业务逻辑时
* 需要执行异步操作时

== 高级用法 ==
=== 模块中的 Actions ===
在模块中，局部 actions 的 <code>context</code> 对象会暴露根状态：

<syntaxhighlight lang="javascript">
modules: {
  user: {
    actions: {
      login({ commit, dispatch, rootState }) {
        // 可以访问 rootState
        if (rootState.maintenanceMode) {
          return dispatch('showMaintenanceMessage')
        }
        // 正常登录逻辑
      }
    }
  }
}
</script>
</syntaxhighlight>

=== Action 订阅 ===
可以使用 <code>store.subscribeAction</code> 监听 actions：

<syntaxhighlight lang="javascript">
store.subscribeAction((action, state) => {
  console.log(`Action ${action.type} with payload:`, action.payload)
})
</syntaxhighlight>

== 可视化流程 ==
<mermaid>
sequenceDiagram
    participant Component
    participant Action
    participant Mutation
    participant State
    
    Component->>Action: dispatch('actionName')
    Action->>Mutation: commit('mutationName')
    Mutation->>State: Modify state
    State-->>Component: Trigger re-render
</mermaid>

== 数学表达 ==
在复杂状态转换中，可以用数学表示 action 的纯函数特性：

<math>
f(context, payload) \rightarrow Promise|void
</math>

其中：
* <math>context</math> 包含 store 方法和属性
* <math>payload</math> 是传入的数据
* 返回 Promise 或 undefined

[[Category:前端框架]]
[[Category:Vue.js]]
[[Category:Vuex状态管理]]