用户在登录表单输入用户还有密码，点击登录按钮以后，我们的应用要去请求服务端的登录接口获取用户的令牌。服务端的登录接口会检查请求里的用户名还有密码是否匹配，如果匹配就会给这个用户签发一个令牌。这样我们在前端应用这里就可以拿到这个用户的令牌，然后可以把它存储到本地。

先去创建一个 Store 模块，放在 src/auth/login 的下面，名字是 auth-login.store.ts，在这个文件里输入 vsl ，按下 tab 键可以快速得到的一个带 loading 数据还有请求方法的 store 模块。这个代码片断是我们在项目里自己定制的。

先设置一下 Store 数据的类型，可以是 AuthLoginStoreState，按下 tab 键。继续设置一下 Store 模块的名字，authLoginStoreModule。再按下 tab ，设置一下定义的这个动作的名字，设置成 login，按下 tab，请求用的方法设置成 post，请求的地址是 /login，这个地址就是服务端应用提供的用户登录接口。

按下 tab，设置一下请求响应回来的数据的类型，名字是 LoginResponseData。 按下 tab 键，设置一下数据的名字，可以是 loginResponseData。

响应类型

下面可以设置一下响应数据的类型，请求用户登录接口，返回的数据里面有一个 id 属性，类型是 number，还有一个 name 属性，类型是 string，还有一个 token ，类型也是 string。

刚才我们创建这个 Store 模块的时候，用了一个代码片断，这个代码片断就是在 .vscode/vue.code-snippets 这个文件里定义的。

解释

我们再简单回顾一下刚才创建的这个 Store 模块。 这个 AuthLoginStoreState 是这个 Store 模块里用的数据的类型 ，也就是模块的 state 属性的类型。

模块的名字叫 authLoginStoreModule， 模块里有两个数据，loading 还有 loginResponseData 。 还有两个 getter 方法，一个是 loading 返回的就是 loading 这个 state。 loginResponseData 这个 getter 返回的值是 loginResponseData 这个 state。

在 Mutations 里面定义了两个修改器，setLoading 可以设置 loading 的值，setLoginResponseData 修改的就是 loginResponseData 这个数据的值。

在 actions 里面定义了一个动作，名字叫 login，这个动作会去请求服务端应用的登录接口。 请求成功以后会把请求回来的数据交给这个 Store 模块里的 loginResponseData 数据。

请求出现问题的话会 throw 错误里的响应。

authLoginStoreModule

下面再去创建一个 Store 模块，放在 src/auth 的下面，名字是 auth.store.ts ，在这个文件里定义一个 Store 模块，模块里的数据类型是 AuthStoreState，模块的名字是 authStoreModule。

再设置一下这个数据类型，里面添加一个 login 属性，类型是 AuthLoginStoreState，编辑器会自动帮我们导入这个东西。

然后在这个模块里可以再添加一个 modules 属性，它里面的东西是这个模块包含的其它的模块，添加一个 login，对应的是 AuthLoginStoreModule 模块，编辑器会自动帮我们导入这个模块。

app.store

再打开 src/app 下面的 app.store ，先修改一下 RootState 这个类型，里面添加一个 auth ，类型是 AuthStoreState 。然后在这个 Store 的 modules 里面， 添加一个 auth ，对应的是 authStoreModule 模块，编辑器会帮我们导入这个模块，还有模块里的那个数据类型，它们都来自 auth.store 这个 Store 模块。