打开 auth-login 组件，在这个组件里可以使用 authLoginStoreModule 里面提供的数据还有动作。先在组件里导入 mapGetters 还有 mapActions 这两个帮手方法，它们来自 vuex。

然后找到组件的 computed 选项，把执行 mapGetters 返回的结果放到这里，本地组件叫 loading，对应的是 auth/login 下面的 loading 这个 getter 方法。 再添加一个，在本地组件里面叫 loginResponseData，对应的就是 auth/login 模块下面的 loginResponseData。

方法

下面再添加一个方法，找到 methods ，把执行 mapActions 返回的结果放到这里，本地组件里这个方法叫 login ，对应的就是 auth/login 模块里的 login 这个动作。

使用

然后可以再修改一下这个点击事件处理器，onClickLoginButton ，先用 async 标记一下这个方法。

去掉方法里的东西，用一组 try，catch，catch 到错误以后在控制台上输出 error 。

在 try 里面， 添加一个 response ，等于 await ，执行一下组件里的 login 方法，使用这个方法的时候提供一个对象参数，里面有 name 这个属性，对应的值是 this.name ，还需要一个 password ，对应的值是组件里的 password 这个数据的值。

这个对象就是要发送给服务端应用的登录接口的数据，服务端应用的登录接口需要知道登录用户的用户名还有他的密码。

下面可以在控制台上输出这个 response。

测试

回到浏览器，测试一下用户登录。输入用户名，再输入对应的密码，点击 登录。 控制台输出了一个错误响应，在 message 里面提示要提供用户名。

这是因为在 authLogin 这个 Store 模块里定义的这个 login 动作的上面，没有添加它支持的参数，这里需要添加一个 data 参数，然后再把这个 data 参数的值作为这个 post 方法的第二个参数的值。这样在使用 login 这个动作的时候，就可以给它提供一个 data 参数，参数的值会发给服务端的登录接口。

再回到浏览器测试一下，输入用户名，还有用户的密码，点击 登录。成功以后，会在控制台上输出得到的响应，这个响应里的 data 属性的值就是响应的数据，它里面有一个用户的 id ，用户的名字，还有给用户签发的令牌。