“华辰芯光”完成过亿元A1轮融资，和创资本领投
06-18
前言经过上一章的介绍，实现mutations的功能已经完成，那么本文将实现actions的功能。在这篇文章中，我将首先介绍actions的作用，然后介绍实现思路，最后实现代码。
actions的作用是异步修改共享数据。如何异步修改呢？这时候我们回到Vue的官方Vuex文档。
有一张图如下： 从图中可以看到，我们调用组件中的dispatch方法，然后dispatch方法会调用actions，然后actions中的方法可以通过commit调用mutations中的方法。最后，mutations中的方法会修改state中的数据。
这就是动作的作用。回顾动作这里我们首先回顾一下如何使用动作，然后再次实现它们。
发布官方Vuex注解，在store中定义age，在mutations中定义changeAge方法，在actions中定义asyncAddAge方法（页面通过dispatch调用actions中的方法，actions中的方法通过commit调用mutations中的方法） 。以上是我的原创首先，接下来我们来实现一下代码。
我这里直接贴代码了。代码中有详细的注释。
代码如下： 代码语言：text 复制 1.跳过 2.定义agestate: {age: 0} 3.在mutations/**中定义changeAge方法 * 通过dispatch调用 * @param state 仓库的状态 * @ param Payload load */addAge(state, Payload) { state.age += Payload;} 4.在actions/**中定义asyncAddAge方法 * 通过dispatch调用 * @param commit 提交 * @param Payload Payload */asyncAddAge({ commit}, Payload) { // 模拟异步操作 setTimeout(() => { // 通过commit调用mutations中的方法 commit('addAge', Payload); }, ); }通过组件中的dispatch调用actions中的方法（HelloWorld组件） 代码语言：文本复制 // 显示数据
{{ this.$store.state.age }}
// 调用actions中的方法 myFn() { this.$store.dispatch('asyncAddAge', 10);}，npm runserve启动项目，点击按钮，后面会出现age 3秒 数值加10表示动作功能已实现。效果如下： 代码实现到此结束。审核完成后，我们就可以开始实现actions的功能了。actions的实现思路和mutations是一样的。
首先，注释掉官方的Vuex并导入我们自己的Nuex： 代码语言：javascript copy import Vuex from './Nuex'// import Vuex from 'vuex' return 在我们的Nuex文件中，我们像以前一样将操作保存到Store中。我这里有一个单独的 initActions 方法。
代码如下： 代码语言：javascript copy // 将传递过来的action放到Store上 this.initActions(options ); initActions 方法的实现如下： 代码语言：javascript copy initActions(options) { // 1. 获取传入的动作 let actions = options.actions || {}； // 2. 向 Store 属性添加一个操作 this.actions = {}; // 3. 将传入的actions中的方法添加到当前Store的actions中 for (let key in actions) { this.actions[key] = (payload) => {//4. 执行actions中的方法，并且将当前 Store 实例传递给 actions[key](this, Payload);这里的实现思路和mutations是一样的，只不过将mutations替换为action，然后将传入的action中的方法添加到当前Store的action中。最后，执行actions中的方法并传递当前的Store实例。
测试是否已经添加到Store中，运行项目，测试结果如下：可以看到actions已经添加到Store中，然后页面通过dispatch调用actions中的方法，所以我们需要在Store Method上添加dispatch，代码如下： 代码语言：javascript copydispatch = (type, payload) => { this.actions[type](payload);} 这里的实现思路是一样的作为mutations，只不过commit换成了actions，然后传入的actions中的方法就会被执行，并且会传递当前的Store实例。运行项目，测试结果如下： Uncaught TypeError: Cannot readproperties of undefined (reading 'mutations') 这里报错。
其实我已经知道错误在哪里了。我先带大家看一下调用流程，然后再解决。
这个问题。在组件中调用dispatch方法时，我传递了'asyncAddAge', 10。
在dispatch方法中，我获取了传入的类型，为'asyncAddAge'，payload为10，然后在actions中调用了该方法。在该方法中，我获取了传入的payload，即10。
在asyncAddAge方法中，我调用了commit方法，这意味着在mutations中调用该方法。在commit方法中，我拿到了传入的类型，即'addAge'，payload为10，然后调用mutations中的方法，这里报错，因为在commit方法中，我拿到了传入的类型，即 'addAge'，代码继续执行，直到 this.mutations[type](payload);这是未定义的，因此会报告错误。
正是因为在actions中的方法中，我调用了commit方法，也就是我调用了mutations中的方法。调用的时候没有告诉commit方法这是谁，所以就报错了。
那么如何解决这个问题呢？其实很简单。只需要将之前的commit方式改为箭头函数即可。
因为改成了箭头函数，所以this就是当前的Store实例（如果改成箭头函数当前定义的地方，this就是它）。代码如下： 代码语言：javascript copy commit = (type, payload) => { this.mutations[type](payload);} 运行项目，测试结果如下： 至此，actions的功能已实施。
接下来，我们来回顾一下实施情况。想法。
摘要：将传入的操作放在 Store 上。在 Store 上添加调度方法。
在dispatch方法中，调用actions中的方法。在actions的方法中，调用commit方法。
在commit方法中，调用mutations中的方法（来吧。
版权声明：本文内容由互联网用户自发贡献，本站不拥有所有权，不承担相关法律责任。如果发现本站有涉嫌抄袭的内容，欢迎发送邮件 举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。
标签：
相关文章
06-18
06-17
06-21
06-17
06-18
最新文章
【玩转GPU】ControlNet初学者生存指南
【实战】获取小程序中用户的城市信息（附源码）
包雪雪简单介绍Vue.js：开学
Go进阶：使用Gin框架简单实现服务端渲染
线程池介绍及实际案例分享
JMeter 注释 18 - JMeter 常用配置组件介绍
基于Sentry的大数据权限解决方案
【云+社区年度征文集】GPE监控介绍及使用