前言：

vuex是什么，我理解是在vue框架中使用的一個保存全局信息酱鸭、狀態(tài)的模塊吗垮，項目到了什么規(guī)模，具有什么特點凹髓，才應該使用它呢烁登？為什么不能自己創(chuàng)建一個保存全局信息的js文件，而非使用它呢扁誓？呵呵防泵，暫時回答不上來，我想只有當我們完全了解它的作用以及用法之后蝗敢，才會在需要它的時候想起它，使用它足删，進而總結出使用它的場景和選擇它的原因寿谴。

系統(tǒng)登錄后，當前登錄的用戶信息失受，為什么要保存下來呢讶泰？因為系統(tǒng)別的地方會用咏瑟。為什么不能用的時候再向后臺請求呢？呵呵痪署，暫時回答不上來码泞。

雖然有些問題答不上來，但為了生活狼犯，還是先學會用余寥，并在學習的過程中找答案吧！開始了悯森。

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刷新熬甫，呵呵胰挑，漂亮。

激動人心的時刻到了椿肩，要點擊登錄了瞻颂，這下問題來了，在點擊登錄的處理函數(shù)里郑象，直接調后臺接口嗎贡这？有點年輕，有點簡單厂榛。到底應該怎么做盖矫，暫時回答不了，但此時此刻击奶，我得先用vuex把當前登錄用戶的信息存下來辈双，因為今天我要學的就是這個。來吧柜砾！

先把vuex安裝了

$npm install -g vuex

在src目錄下建個store文件夾湃望，并在其下創(chuàng)建index.js文件，再創(chuàng)建個modules文件夾痰驱，在其下創(chuàng)建login.js文件证芭，兩個文件代碼如下：

index.js

login.js

回到瀏覽器，f5担映，登錄废士！沒反應，沒彈框蝇完，擦湃密∽缣簦看看四敞。沒報錯泛源。/思考

法克，點登錄時調的函數(shù)還沒實現(xiàn)呢忿危。/流汗

先寫上這么一句达箍，一會再捋。

回到瀏覽器铺厨，f5缎玫，登錄！沒反應解滓，擦赃磨。看看洼裤。報錯了邻辉。

HelloWorld里的login函數(shù)里的dispatch是undefined，/思考腮鞍，呵呵值骇，defined了就怪了，store直接就用了移国，還沒import了吱瘩，這個store，或者說這個vuex迹缀，是一個保存全局狀態(tài)的一個模塊使碾，應該有不少界面會用，在當前界面引不太合適祝懂，去main.js引吧票摇，引完了想哪用就哪用了。引完了是醬嬸的嫂易。

main.js

回到瀏覽器兄朋，f5，登錄怜械！呵呵颅和。

出來吧

來吧，捋捋吧缕允。

先從HelloWorld界面點擊登錄時進入的函數(shù)login開始走起峡扩，有這么一句

調用了store的dispatch方法，倆參數(shù)障本，一個是類似key的東西‘Login’教届，一個是登錄信息data响鹃，進到哪去了呢？store是我們建立的vuex實現(xiàn)模塊案训，去store文件夾下面的index.js看下

沒有Login或dispatch這些東西啊买置，誒，但它引了個login子模塊强霎，再進到/store/modules下的login.js看下

誒誒忿项，有個Login，而且是倆參數(shù)城舞，靠譜轩触！最關鍵的是我們在這寫了個alert驗證我們的代碼，確實也彈框了家夺，說明代碼是走到了這里脱柱，這下問題來了，我明明調的是名為dispatch的函數(shù)拉馋，怎么就進這來了呢榨为？呵呵，答不上來椅邓。我搜索了下柠逞，現(xiàn)在只知道的是，這個login.js里面目前有3塊景馁，state+mutations+actions板壮，dispatch會進入actions下以dispatch第一個參數(shù)為名字的函數(shù)！至于其它2塊合住，state+mutations绰精，呵呵，暫時不知道透葛！

index.js引了個login笨使，就找到了它actions下的Login，我要是再引個login2也有個Login僚害，會去哪呢硫椰？我試試。

你猜怎么著萨蚕？兩個都進了靶草，而且進的順序和index.js中引入的順序一致。/偷笑岳遥，這里我要做一個大膽的猜測奕翔，這些Login會在一個 隊列/棧/鏈表 的數(shù)據(jù)結構中待著，等著被調用浩蓉，都不會被落下派继，也不會亂序宾袜。

還有，我一個login.js里面定義多個Login驾窟，又會如何呢庆猫？我試試。

你猜怎么著纫普？

彈出來的3阅悍。

還有，store的文件夾昨稼，模塊命名，一般都用store拳锚，換個行不行假栓？我試試。

你猜怎么著霍掺？ide阻止了我我rename匾荆。

問題越想越多，時間不等人杆烁，歲月不饒人牙丽，先這樣吧，還有好多要學的咧兔魂！

下篇模擬一下后臺登錄烤芦，登錄成功后跳個頁面，并把用戶信息get一下析校。