前言：

vuex是什么，我理解是在vue框架中使用的一个保存全局信息、状态的模块，项目到了什么规模，具有什么特点，才应该使用它呢？为什么不能自己创建一个保存全局信息的js文件，而非使用它呢？呵呵，暂时回答不上来，我想只有当我们完全了解它的作用以及用法之后，才会在需要它的时候想起它，使用它，进而总结出使用它的场景和选择它的原因。

系统登录后，当前登录的用户信息，为什么要保存下来呢？因为系统别的地方会用。为什么不能用的时候再向后台请求呢？呵呵，暂时回答不上来。

虽然有些问题答不上来，但为了生活，还是先学会用，并在学习的过程中找答案吧！开始了。

1 初始化项目：

1.1 安装node.js

1.2 生成基础项目

$ npm install -g vue-cli（vue-cli工具，全局安装，之前安装过可跳过，但再安一遍也没事）

$ vue init webpack my-project（生成项目）

$ cd my-project（进入项目文件夹）

$ npm install（npm可能需要到国外站点下载，慢，有一个cnpm使用国内镜像，快）

$ npm run dev（启动项目）

打开浏览器运行下，出来了，呵呵

2 制作登录界面

把默认界面改改得了，默认界面在哪呢？

项目目录

就是它，虽然说是界面，但其实这个文件我觉得应该叫做vue的一个组件，每个vue的组件都得由<template><script><style>三部分组成，<template>写html，<script>写js，<style>写css，当然可以啥也不写，不就是看个大白板么，不过刚试了下，啥也不写报错，行，先留它们一会，先看看。

logo图片，看意思图片资源是放在asserts文件夹下面的，先删了，呵。

<router-view/>? 指令的方式引了个界面？麻蛋，找不着啊，于是我来到了router文件夹下的index.js看看，呦呵，有个默认路由，给我路到了一个组件/界面/component，叫HelloWorld，是在components文件夹下

打开看看，卧槽，就是它！咋就路这儿来了呢？暂时回答不上来。

我把你改成登录界面

返回浏览器，f5刷新，呵呵，漂亮。

激动人心的时刻到了，要点击登录了，这下问题来了，在点击登录的处理函数里，直接调后台接口吗？有点年轻，有点简单。到底应该怎么做，暂时回答不了，但此时此刻，我得先用vuex把当前登录用户的信息存下来，因为今天我要学的就是这个。来吧！

先把vuex安装了

$npm install -g vuex

在src目录下建个store文件夹，并在其下创建index.js文件，再创建个modules文件夹，在其下创建login.js文件，两个文件代码如下：

index.js

login.js

回到浏览器，f5，登录！没反应，没弹框，擦。看看。没报错。/思考

法克，点登录时调的函数还没实现呢。/流汗

先写上这么一句，一会再捋。

回到浏览器，f5，登录！没反应，擦。看看。报错了。

HelloWorld里的login函数里的dispatch是undefined，/思考，呵呵，defined了就怪了，store直接就用了，还没import了，这个store，或者说这个vuex，是一个保存全局状态的一个模块，应该有不少界面会用，在当前界面引不太合适，去main.js引吧，引完了想哪用就哪用了。引完了是酱婶的。

main.js

回到浏览器，f5，登录！呵呵。

出来吧

来吧，捋捋吧。

先从HelloWorld界面点击登录时进入的函数login开始走起，有这么一句

调用了store的dispatch方法，俩参数，一个是类似key的东西‘Login’，一个是登录信息data，进到哪去了呢？store是我们建立的vuex实现模块，去store文件夹下面的index.js看下

没有Login或dispatch这些东西啊，诶，但它引了个login子模块，再进到/store/modules下的login.js看下

诶诶，有个Login，而且是俩参数，靠谱！最关键的是我们在这写了个alert验证我们的代码，确实也弹框了，说明代码是走到了这里，这下问题来了，我明明调的是名为dispatch的函数，怎么就进这来了呢？呵呵，答不上来。我搜索了下，现在只知道的是，这个login.js里面目前有3块，state+mutations+actions，dispatch会进入actions下以dispatch第一个参数为名字的函数！至于其它2块，state+mutations，呵呵，暂时不知道！

index.js引了个login，就找到了它actions下的Login，我要是再引个login2也有个Login，会去哪呢？我试试。

你猜怎么着？两个都进了，而且进的顺序和index.js中引入的顺序一致。/偷笑，这里我要做一个大胆的猜测，这些Login会在一个 队列/栈/链表 的数据结构中待着，等着被调用，都不会被落下，也不会乱序。

还有，我一个login.js里面定义多个Login，又会如何呢？我试试。

你猜怎么着？

弹出来的3。

还有，store的文件夹，模块命名，一般都用store，换个行不行？我试试。

你猜怎么着？ide阻止了我我rename。

问题越想越多，时间不等人，岁月不饶人，先这样吧，还有好多要学的咧！

下篇模拟一下后台登录，登录成功后跳个页面，并把用户信息get一下。