Vue.js通过Pokemon#2 $ refs,Promises和Event Bus进行了解释

在第二部分中,我们将恢复攻击功能。

我们有几种方法可以做到这一点。

  1. 与$ refs和Promises一起破解
  2. 使用可以减轻工作负担的事件总线
  3. 使用状态管理库Vuex进一步分离逻辑/数据。

我们将在本文中介绍前两个选项,因为它们不太难于解释和实现。

让我们潜入。

攻击功能

首先,让我们定义攻击功能。

打开Pokemon.vue,我们将添加一个Attack()pickRandomAttack()方法。

让我们在新创建的methods属性下定义它们:

正如您在此时看到的那样,攻击功能实际上并没有提供一种方法来通知其调用者昏厥或何时继续执行下一个操作。 接下来,我们将解决这个问题。

小提示,我们正在通过this。$ parent访问神奇宝贝组件的父状态。 可以猜测,它返回引用了pokemon组件的组件的Vue实例。在我们的场景中,我们确定App.vue始终是父项,因此可以使用它。 在不确定的其他情况下,您将不必(通过事件或状态管理器)找到解决此问题的方法。

基于承诺的方法

如果您不了解诺言,则可以在此处快速阅读用例和API。

基本上,诺言使我们能够明确定义命令链。
首先定义一个可以通过或失败的函数, 然后使用then()定义成功解析后会发生的情况。 使用catch()可以定义失败时应该发生的情况。

让我们描述一下命令链。

当用户选择攻击时:

  1. 我们降低对手的生命值
  2. 等待一会儿,HP栏下降
  3. 如果对手还活着,选择一个随机攻击并降低玩家的HP
  4. 等一会儿HP线下降

在第1步和第3步之后,我们还将使用“ { pokemon} used { Attack} ”之类的内容更新战斗文本。

在第3步的开始和第4步的结束时,我们将检查是否还有足够的HP,否则,我们将兑现诺言,并证明口袋妖怪晕倒了。

成功后,我们必须将战斗文本重置为“ { pokemon.player.name}会做什么?”。

让我们将此过程转换为一个承诺解决方案:

  • 承诺:攻击对手宠物小精灵
  • 失败( 拒绝 ):对手的生命值降低至0
  • 成功( 解决 ):对手有HP离开
  • 成功后( 然后 ):返回一个新的诺言,该诺言从对手中随机选择一个攻击并将其用于玩家。
  • 失败( 拒绝 ):玩家生命值降低至0
  • 成功( 解决 ):玩家的HP剩余了
  • 成功( 然后 ):重置战斗文本
  • 失败时( catch ):更改战斗文本并显示endOptions菜单

让我们将其倒入代码中,打开App.vue并在resetBattle方法下添加以下代码:

建设者

如您所见,您可以通过在其构造函数中分配一个函数来创建一个Promise。 此函数分配了2个参数:解析回调和拒绝回调。 您猜对了,应该将这称为成功/失败。

您还记得上一篇教程中我们向神奇宝贝组件添加了ref属性吗?

因此,我们可以使用指定的名称通过this。$ refs访问其状态和方法。

我们必须调整攻击功能,以便它也将resolve拒绝回调作为参数。

然后

如果对手还剩下HP,则将调用第一个。
在这种情况下,选择随机攻击并对玩家的宠物小精灵进行攻击。

我们通过返回另一个承诺(因为先前的承诺已经成功)来做到这一点。

然后

如果玩家的口袋妖怪还剩下HP,则称为第二个。

这次我们只想重置战斗文本,以便玩家可以继续玩。

抓住

口袋妖怪晕倒时会被叫到。 这可能是对手,也可能是玩家的宠物小精灵。

很高兴知道,如果在玩家攻击时诺言被拒绝,它将无法达到对手的新诺言。

我们必须调用拒绝回调并为其指定晕倒的宠物小精灵的名称。

让我们回到Pokemon.vue并添加resolve / 拒绝回调:

就是承诺,攻击正在起作用。

您可以在这里找到代码的副本:

GitHub – happyDemon / learning-vue-through-pokemon,第2章-批准
learning-vue-through-pokemon –此仓库包含我的教程系列“通过pokemon学习Vue.js”的代码github.com

基于事件的方法

采用这种方法有点不同。 它需要更多的代码,但是更加冗长。

基于承诺的方法的主要区别在于每个事件都有自己的名称,因此代码将更易于阅读和理解。

我们将使用vuemit为我们完成繁重的工作。 此程序包使我们可以全局定义事件,同时仍然允许我们访问所需的状态。

让我们从拉入开始。

一旦完成,我们将不得不在加载Vue.js之后将其添加到main.js中

大事记

让我们看一下更传统的Javascript方法。

我们将要利用4个事件:

  • player.attack(attackName) :执行玩家的宠物小精灵攻击。
  • jacket.attack() :执行对手的宠物小精灵攻击。
  • Attack.completed() :重置战斗文本。
  • fainted(pokemonName) :更改战斗文本并显示endOptions

一旦安装了App.vue ,我们就注册它们,这意味着一旦加载了应用程序并准备使用它,我们便会注册事件。

您可以在Vue实例定义上定义它,我倾向于将其放在任何数据定义之后(在数据方法和计算属性之后)。

如您所见,它几乎与我们在定义承诺时使用的逻辑相同。

但是,它的读法更清晰,在逻辑上已被命名和排序。

实作

通过将processAttack方法更改为以下内容,让我们将基于诺言的实现与基于事件的实现切换:

就是这么简单,我们只需要一行代码,剩下要做的就是重写攻击功能。

我们只需要替换以前使用resolve拒绝回调的位置即可。

让我们打开Pokemon.vue并相应地更改攻击方法:

我们有了它,这就是您将使用事件而不是promise的方式。

您可以在这里找到此方法的代码:

GitHub –第二章活动中的learning-vue-through-pokemon
learning-vue-through-pokemon –此仓库包含我的教程系列“通过pokemon学习Vue.js”的代码github.com

下次,我们将研究使用Vuex来简化状态管理,因此我们可以开始准备实现一些实际上不属于组件内部的更重的逻辑。

与往常一样,您可以在github上获取最新代码:
https://github.com/happyDemon/learning-vue-through-pokemon