vuex中action和mutation区别 vuex中action

Vuex Actions 在设计上只接受上下文和一个有效负载参数。当需要向 Action 提交多个数据时，应将这些数据封装成一个对象作为有效负载。本教程将详细介绍如何正确地定义和调用 Vuex Action，以顺利地处理多参数传递，避免常见的 API 请求错误，确保数据流的清晰高效。Vuex Action 参数约定

在 vuex 中，actions 负责提交突变，进行操作异步，并可以包含业务逻辑。每个action函数默认接收两个参数：context：一个与store实例具有相同方法和属性的对象，包含state、getters、commit和dispatch等。payload：这是一个可选参数，用于传递额外的数据。Vuex规定这个参数只是一个单独的值。

因此，当我们需要向action传递多个独立的数据项时，不能直接在action参数函数签名中定义多个来接收，例如异步getFlights(context，selectedPoint，departmentPoint)这样写法是错误的，Vuex 只要将selectedPoint识别为payload，而出发点将无法被正确的提交。这通常会导致接口接口因缺少参数而返回400错误。解决方案：使用Payload对象提交多参数

解决此问题的核心是遵守Vuex的参数约定，将所有需要提交的数据封装到一个需要的JavaScript对象中，作为payload提交。然后在action函数内部，通过对象解构（Object） Destructuring）的方式，轻松地提取出所需的各个数据。1. Action定义中的参数解构

在定义action时，将第二个参数payload作为一个对象来接收，并直接在参数列表中使用解构变量来获取内部属性。

// store/index.jsconst store = new Vuex.Store({ state： { token： 'YOUR_API_TOKEN' // 假设这里存储了API token }，mutations： { setFlights(state， data) { // 处理航班数据 console.log('Flights data：'， data)； } }， actions： { // 正确的action 定义：使用对象解接收结构多个参数 async getFlights(context， { selectedPoint，出发点}) { console.log('正在获取航班出发地：'， selectedPoint， '目的地：'，出发点)； const res = wait fetch( `http://api.travelpayouts.com/v2/prices/month-matrix?currency=rubamp；origin=${selectedPoint}amp；destination=${departurePoint}amp；show_to_affiliatesamp；token=${context.state.token}`， )； if (res.ok) { 让result = wait res.json()； context.commit('setFlights'， result.data)； console.log('航班获取成功。')； } else { console.error('获取航班失败：'， res.status， res.statusText)； } return res.ok； }， }，})；登录后复制

在上述代码中，async getFlights(context， { selectedPoint，它表明 getFlights action 接收一个上下文对象和一个有效负载对象。这个有效负载对象被立即解构，将其 selectedPoint 和出发点属性直接提取为同名的局部变量。

立即学习“共享免费学习笔记（深入）”；2. Action调用时的参数提交

当组件从或其他地方调用（dispatch）这个action时，你需要将所有的封装封装成一个对象，作为dispatch方法的第二个参数提交。

// App.vue 或其他组件lt；templategt； lt；divgt； lt；button @click=quot；fetchFlightDataquot；gt；获取航班信息lt；/buttongt； lt；/divgt；lt；/templategt；lt；scriptgt；import { mapActions } from 'vuex'；export default { data() { return { selectedPoint： 'MOW'， // 输出数据：出发地出发点： 'LED' //输出数据：目的地 }； }，methods： { ...mapActions(['getFlights'])， fetchFlightData() { // 调用动作时，将多个参数封装成一个对象 this.getFlights({ selectedPoint： this.selectedPoint， DeparturePoint： this.departurePoint }) .then(success =gt； { if (success) { console.log('航班数据操作成功完成。')； } else { console.error('航班数据操作失败。')； } }) .catch(error =gt； { console.error('获取航班数据时发生错误：'， error)； })； } }}；lt；/scriptgt；登录后复制

在 fetchFlightData 方法中，this.getFlights({ selectedPoint： this.selectedPoint，出发点： this.departurePoint }) 展示了如何将 selectedPoint 和出发点数据封装成一个对象，并作为单个payload传递给getFlights action。注意单一Payload原则：始终记住Vuex Action的第二个参数是payload，它只能是一个单一的值。如果需要提交多个数据，则将它们组合成一个对象。标注的命名：在payload对象中，为每个属性使用、描述性的名称，以提高代码的敏捷性。错误处理：在action中执行异步操作时，务必包含try...catch块或检查响应状态，以网关处理 API 请求失败的情况（例如本例中的 res.ok 检查）。类型检查（可选）： 对于大型应用，可以考虑使用 TypeScript 或 JSDoc 来作为有效负载对象定义接口或类型，增强代码的健壮性和可维护性。

总结

通过将多个组件封装到一个对象中作为有效负载交付，并在action内部使用对象解构，我们能够并同时满足Vuex规范地处理多参数提交的需求。这种模式不仅解决了参数提交的问题，还使得代码更加清晰、易于维护，是Vuex开发中的一项重要最佳实践。

以上就是Vuex Action多参数传递最佳实践指南的内容，更多请关注乐哥常识网其他相关文章！