首页 > 其他分享 >手撕Vuex-实现actions方法

手撕Vuex-实现actions方法

时间:2024-01-05 12:04:55浏览次数:32  
标签:调用 Vuex mutations actions commit 方法 payload


经过上一篇章介绍,完成了实现 mutations 的功能,那么接下来本篇将会实现 actions 的功能。

本篇我先介绍一下 actions 的作用,然后再介绍一下实现的思路,最后再实现代码。

actions 的作用是用来异步修改共享数据的,怎么异步修改,这个时候我们回到 Vue 的官方 Vuex 文档中,有如下这么一个图:

手撕Vuex-实现actions方法_共享数据

从图中可以看出,我们在组件中调用 dispatch 方法,然后 dispatch 方法会调用 actions,然后 actions 中的方法可以通过 commit 会调用 mutations 中的方法,最后 mutations 中的方法会修改 state 中的数据,这就是 actions 的作用。

这里我们先来回顾一下怎么使用 actions,再来实现一遍即可。

  1. 将官方的 Vuex 注释放开
  2. 在 store 中定义 age
  3. 在 mutations 中定义 changeAge 方法
  4. 在 actions 中定义 asyncAddAge 方法 (页面通过 dispatch 调用 actions 中的方法, actions 中的方法通过 commit 调用 mutations 中的方法)

如上是我本次实现的思路,接下来我们来实现代码。

我这里直接贴出代码, 代码中有详细的注释, 代码如下:

1. 略过

2. 定义 age
state: {
    age: 0
}

3. 在 mutations 中定义 changeAge 方法
/**
 * 通过dispatch调用
 * @param state 仓库的state
 * @param payload 载荷
 */
addAge(state, payload) {
    state.age += payload;
}

4. 在 actions 中定义 asyncAddAge 方法
/**
 * 通过dispatch调用
 * @param commit 提交
 * @param payload 载荷
 */
asyncAddAge({commit}, payload) {
    // 模拟异步操作
    setTimeout(() => {
        // 通过commit调用mutations中的方法
        commit('addAge', payload);
    }, 3000);
}
  1. 在组件中通过 dispatch 调用 actions 中的方法(HelloWorld 组件)
// 显示数据
<p>{{ this.$store.state.age }}</p>

// 调用actions中的方法
<button @click="myFn">我是按钮</button>
myFn() {
  this.$store.dispatch('asyncAddAge', 10);
},

npm run serve 启动项目,点击按钮,3 秒后 age 的值加 10,说明 actions 的功能实现了。效果如下图:

手撕Vuex-实现actions方法_异步操作_02

到此为止,回顾完成了之后,我们就可以开始实现 actions 的功能了。

actions 的实现思路和 mutations 的实现思路是一样的,首先将官方的 Vuex 注释掉,导入我们自己的 Nuex:

import Vuex from './Nuex'
// import Vuex from 'vuex'

回到我们的 Nuex 文件中,和之前一样先将 actions 保存到 Store 上,我这里单独弄了一个 initActions 方法,代码如下:

// 将传递进来的 actions 放到 Store 上
this.initActions(options);

initActions 方法的实现如下:

initActions(options) {
    // 1.拿到传递进来的actions
    let actions = options.actions || {};
    // 2.在Store上新增一个actions的属性
    this.actions = {};
    // 3.将传递进来的actions中的方法添加到当前Store的actions上
    for (let key in actions) {
        this.actions[key] = (payload) => {
            // 4.将actions中的方法执行, 并且将当前Store实例传递过去
            actions[key](this, payload);
        }
    }
}

这里和 mutations 的实现思路是一样的,只是将 mutations 换成了 actions,然后将传递进来的 actions 中的方法添加到当前 Store 的 actions 上,最后将 actions 中的方法执行,并且将当前 Store 实例传递过去。

测试一下看看有没有添加到 Store 上,运行项目,测试结果如下:

手撕Vuex-实现actions方法_数据_03

可以看到 actions 已经添加到 Store 上了,那么在页面上是通过 dispatch 调用 actions 中的方法,所以我们需要在 Store 上添加 dispatch 方法,代码如下:

dispatch = (type, payload) => {
    this.actions[type](payload);
}

这里和 mutations 的实现思路是一样的,只是将 commit 换成了 actions,然后将传递进来的 actions 中的方法执行,并且将当前 Store 实例传递过去。

运行项目,测试结果如下:

手撕Vuex-实现actions方法_异步操作_04

Uncaught TypeError: Cannot read properties of undefined (reading 'mutations')

这里报错了,其实这个问题我已经知道错在哪里了,我先带着大家看一下这个调用流程,然后再解决这个问题。

  1. 在组件中调用 dispatch 方法,我传递是的 'asyncAddAge', 10

手撕Vuex-实现actions方法_异步操作_05

  1. 在 dispatch 方法中,我拿到了传递进来的 type,也就是 'asyncAddAge', payload 也就是 10, 然后调用了 actions 中的方法

手撕Vuex-实现actions方法_异步操作_06

  1. 在 actions 中的方法中,我拿到了传递进来的 payload,也就是 10,在 asyncAddAge 方法中,我调用了 commit 方法,也就是调用了 mutations 中的方法

手撕Vuex-实现actions方法_异步操作_07

手撕Vuex-实现actions方法_数据_08

  1. 在 commit 方法中,我拿到了传递进来的 type,也就是 'addAge', payload 也就是 10, 然后调用了 mutations 中的方法

报错的位置在这里,因为我在 commit 方法中,拿到了传递进来的 type,也就是 'addAge', 代码继续往下执行,执行到 this.mutations[type](payload); this 是 undefined,所以报错了。

正是因为在 actions 中的方法中,我调用了 commit 方法,也就是调用了 mutations 中的方法,在调用时没有告诉 commit 方法,this 是谁,所以才会报错。

那么怎么解决这个问题呢?其实很简单,只需要将之前的 commit 方法改为箭头函数即可,因为改为了箭头函数,this 就是当前 Store 实例了(改为了箭头函数当前在哪里定义的那么 this 就是谁),代码如下:

commit = (type, payload) => {
    this.mutations[type](payload);
}

运行项目,测试结果如下:

手撕Vuex-实现actions方法_数据_09

到此为止,actions 的功能就实现了,接下来我们来回顾一下实现的思路。

  1. 将传递进来的 actions 放到 Store 上
  2. 在 Store 上添加 dispatch 方法
  3. 在 dispatch 方法中,调用 actions 中的方法
  4. 在 actions 中的方法中,调用 commit 方法
  5. 在 commit 方法中,调用 mutations 中的方法(这里就走我们上一篇章的流程了)

标签:调用,Vuex,mutations,actions,commit,方法,payload
From: https://blog.51cto.com/u_15652665/9112428

相关文章

  • 手撕Vuex-实现mutations方法
    经过上一篇章介绍,完成了实现getters的功能,那么接下来本篇将会实现mutations的功能。在实现之前我们先来回顾一下mutations的使用。将官方的Vuex导入进来,因为我们的还没有实现,现用一下官方的,来演示一下mutations的使用。mutations是用来修改共享数据的,先在mutations中......
  • 手撕Vuex-实现共享数据
    经过上一篇章介绍,完成了添加全局$store,接下来就是实现共享数据的功能。在Vuex中,共享数据是通过state来实现的,所以我们需要在Nuex.js文件中实现state的功能。在Vuex中,state是一个对象,这个对象中存放的就是我们的共享数据,所以我们需要在Nuex.js文件中定义一个state对......
  • 手撕Vuex-实现getters方法
    经上一篇章介绍,完成了实现共享数据的功能,实现方式是在Store构造函数中将创建Store时将需要共享的数据添加到Store上面,这样将来我们就能通过this.$store拿到这个Store,既然能拿到这个Store,我们就可以通过.state拿到需要共享的属性。除了可以通过.state拿到共享数据之外......
  • 手撕Vuex-添加全局$store
    经过上一篇的介绍,了解到了Vuex的实现本质就是一个插件,所以要做的事情就是实现这个插件的代码编写即可。本篇文章主要是实现一个全局的$store,这个$store是挂载在Vue的原型上的,所以在任何一个组件当中都可以通过this.$store访问到。我们先来看看Vue官方的,我们分别在App.v......
  • 手撕Vuex-Vuex实现原理分析
    本章节主要围绕着手撕Vuex,那么在手撕之前,先来回顾一下Vuex的基本使用。创建一个Vuex项目,我这里采用vue-cli创建一个项目,然后安装Vuex。vuecreatevuex-demo选择Manuallyselectfeatures。这里只需要,Babel与Vuex。选择2.X版本的Vue:创建package.json:是否保存为模板......
  • 手撕Vuex-模块化共享数据下
    前言好,经过上一篇的介绍,了解了Vuex当中的模块化,本章主要介绍Vuex当中的模块化共享数据下篇。我们知道在全局的Store对象当中,我们可以定义全局的数据,那么如果我们在模块当中也定义了一个属性名称和全局的属性名称相同,那么会发生什么呢?我们先来看看,在全局当中定义了一个global......
  • 手撕Vuex-提取模块信息
    前言在上一篇【手撕Vuex-模块化共享数据】文章中,已经了解了模块化,与共享数据的注意点。那么接下来就要在我们自己的Nuex中实现共享数据模块化的功能。那么怎么在我们自己的Nuex中实现共享数据模块化的功能呢?处理数据也非常的简单,是不是就是处理一下子模块的数据,处理一下子模块......
  • 手撕Vuex-安装模块数据
    前言根据上一篇,【手写Vuex】-提取模块信息,我们已经可以获取到模块的信息了,将模块信息变成了我们想要的数据结构,接下来我们就要根据模块的信息,来安装模块的数据。在上一篇当中我们定义了一个ModuleCollection类,这个类的作用就是将模块的信息转换成我们想要的数据结构。接下来我们......
  • 手撕Vuex-安装模块方法
    前言经过上一篇文章的介绍,我们实现了将模块安装到store中,那么本章我们就来介绍一下怎么安装模块当中的方法也就是actions、mutations、getters。所以本次文章的目标就是将模块当中的actions、mutations、getters安装到store中,然后在组件中使用。分析阶段那么安装actions、m......
  • Dart 非常详细日期的操作方法
    Dart非常详细日期的操作方法近期在研究Dart源码,把关于Date这一块写个文章进行整理分享。在Dart中操作日期通过DateTime类来实现。由于DateTime是Dart内置的,所以不需要导入。解析DateTimeDateTime.parseDateTime.tryParseDateTime.utc解析一个日期可以通过DateTime.p......