Vue：踩不完的异步之坑

Js 的异步确实完美地解决了单线程的问题，但是同时也会带来许多问题。而且随着用的框架越来越多，越来越复杂，定位问题的难度也随之上升。

不知为什么，总觉得Vue 的断点调试相比于不使用框架的情况下更难用，这可能也是花了一个小时才找到问题产生的根源的原因。废话少说，以下便是问题产生的全过程以及查找问题的流程与逻辑梳理。

1. 任务需求分析

1.1 两个页面，两个组件

任务需求涉及到两个页面和两个组件之间的恩怨纠纷，它们的关系如下：

1.2 需求描述

• 用户管理和权限管理是两个并列的页面。
• 点开用户管理，里是userTable 组件展示出的用户列表。
• 点开权限管理页面，然后点击页面上的组成员按钮，弹出modalUserList 弹框组件，modalUserList 中是userTable 组件展示的用户列表。
• 点开用户管理时展示的是所有的用户列表，点开权限管理再点击组成员时展示的是属于该组的成员列表。

2. 功能是如何实现的？

2.1 以前端思维消化需求

• 两个页面用到了同一个组件userTable，但是需要有不同的表现。所以我们需要一个tabletype 字段来标识当前是哪个页面引用了userTable 组件。
• 用户点击权限管理页面的时候，他的孙子元素userTable 需要根据用户点击的记录id 来获取该组的用户信息，中间涉及两层父子组件通信，不太方便，使用vuex 进行处理。

2.2 代码实现 (简化版)

• 用户管理页面引用userTable 组件的代码

<userTable
  :tableType="1"
  :userList="userList"></userTable>

• 权限管理页面引用modalUserList 组件的代码

<modalUserList
  @closeModal=