书接前文。
来到/store/modules.login.js,找到弹框的地方
在这里，登录信息应该就在那个info里面，我只要用他们调用后台的登录接口就行了呗，ok。
一般调用后台接口的js文件都会统一管理，所以我也在src目录下建立一个名为api的文件夹，放置这些js文件，这里先建立一个login.js，用来管理login界面的后台接口，等等，我的login界面貌似还叫HelloWorld.vue呢，我先改了它。
改完了文件名突然意识到，这个界面，或者说这个组件在/router的index.js里面被引用过，也得跟着改，于是乎我全局搜索了一下
还全都在这个文件里了，一起改了吧！
回到浏览器，f5刷新，没毛病！接着来。
打开/api/login.js，一般情况下，例如我公司的项目吧，会在这里配置一些url，请求方法（get/post/put/delte）等信息，再加上全局变量中的后台ip地址、端口等参数，通过一些网络插件（ajax等）把数据包封装好发送到服务端，这里我先略了，研究到那了再说，现在先模拟一下，我仅在/api/login.js中初始化了一个数组，俩账号，如下：
再次回到/store/modules/login.js，先把/api/login.js引入，再把弹框代码修改下：
回到浏览器，f5刷新，没毛病！
稍微解释下loginByUserinfo.map这个函数，就是在loginByUserinfo这个数组中遍历，挨个比较找找看有没有满足if中条件的，那么问题来了，如果有多个满足的呢？我试试。
有几个弹几次，不信你试试。
行，到了这，我先姑且认为username为1的这个用户认证成功了，那么，我先把人家的完整信息给保存一下，代码做如下修改：
3块state+mutations+actions都有修改，稍作解释，先看actions：
首先item是打印出来了，没毛病
那后面这4个commit干了啥呢？分别调用了mutations中以commit第一个参数为名字的方法：
而mutations中的这些方法又对state中对应的属性进行了赋值，这样，才达到了我们最终的目的，什么目的？就是一些全局变量的存储，有朋友问了，为什么要这样做呢？简单的set不行吗？抱歉，暂时我还不能全面回答，我也百度查了一下，表面知道一些原因，但还没有理解消化吸收，就先不讨论了，但这样做，确实是使用vuex进行了全局变量（vuex将它成为state、即“状态”，这个词可能要体会下）的存储。
存储成功了吗？我们去验证一下吧！
再次回到login.vue，在login方法中的回调函数中尝试取一下那些state
确实打印出来了
但好像这种取法还不对，应该怎么取呢？首先我们要在store文件夹下创建一个getters，添加如下代码，把state定义出来：
然后再/store/index.js里面引入一下
再次回到login.vue，修改一下代码
确实打印出来了，没白忙活。
再把界面跳转一下吧，在login.vue中加一句，router自带的跳转方法
打算跳转到index这个界面，想要跳转，得把路由写好，改一下/router/index.js吧
新加了一条路由，path赋值了'/index',就是刚才在login.vue里面push的参数，而这个path对应哪个界面（或者说组件）呢，component那写着了呗，这里赋值了index，而index则是在上面import部分引入的一个界面（组件），在components文件夹下，所以我们还要创建那个文件index.vue
回到浏览器，f5刷新，点击登录，哈哈。
貌似今天要干的都实现了，可回头看看，总觉得还有很多漏洞、有很多不理解的地方。比如说login.vue里面处理登录的时候，为什么要调用dispatch再进行后台验证呢？不能在login.vue里面进行后台验证，如果成功了，就把用户信息直接commit给/store/modules/login.js里面的mutations吗？网上看了下，好像说异步的请求要用dispatch提交给actions，但是为什么呢？
诸如此类，还有很多不明白，需要研究的地方，等功能一点点丰富起来，再思考吧！我觉得程序这个东西，或者说各种技术工具，都是遇到问题、解决问题的过程中逐渐发展来的，急也没有用，饭还得一口一口吃。
下一篇准备多弄几条路由和界面，让它们跳转起来。
