本文是本系列的第三篇文章。在前兩篇文章中我們介紹了關于搭建vue+elementUI開發環境的方法和編寫導航頁的方法。關于前兩篇文章的内容，若讀者有些記不清楚，可以點選下方連結快速檢視：
<a href="http://blog.csdn.net/u012907049/article/details/72764151" target="_blank">從零開始搭建自己的VueJS2.0+ElementUI單頁面網站（一、環境搭建）</a>
<a href="http://blog.csdn.net/u012907049/article/details/72790779" target="_blank">從零開始搭建自己的VueJS2.0+ElementUI單頁面網站（二、編寫導航頁）</a>
本文結尾附有目前工程的下載下傳位址。
下面進入正題。在這篇文章中我将對第一個非導航頁面，也就是第一個有實質内容的頁面進行設計和開發。這次我們要開發一個擁有表單和表格功能的頁面。先上開發完的效果圖：
效果圖
可以看出頁面非常的簡單，其中上半部分是表單搜尋和查詢，下半部分是用于展示資料的表格。如果按照傳統的開發思路，其實非常簡單，隻要用兩個div，第一個div放置表單，第二個div放置表格即可。但是，我們今天要介紹的，是這個頁面的另一種寫法，也是vue作為一個優秀的前端架構的核心功能，也就是元件化的寫法。
某搜尋引擎告訴我們，元件化是指解耦複雜系統時将多個功能子產品拆分、重組的過程，有多種屬性、狀态反映其内部特性。以我們這次要編寫的頁面為例，元件化就是要将這個頁面裡面的表格和表單分開成兩個不同的元件，每個元件有它自己的屬性和狀态，既互不幹擾又可以互相通信。
從上文中的定義我們也可以看出，元件化的主要目的是解耦。當然，還有其他的目的，比如元件複用，按需引入等。具體的細節我們可以先往下看。
為了規範工程的層級，我們把原先與Navi檔案夾同級的Page1，Page2和Page3.vue檔案删掉，重建立立三個名為Page1，Page2和Page3的檔案夾，并分别在三個建立立的檔案夾中建立Page1.vue，Page2.vue和Page3.vue。當然，結束之後同樣要修改vue-router對于這三個元件的引用路徑。如下圖
修改後的router
接着，在剛才建立的Page1檔案夾下，建立兩個新vue元件：StudentForm.vue和StudentTable.vue。
這兩個元件就是我們即将要編寫的表單元件和表格元件。
我們首先在src目錄下建立一個名為vuex的檔案夾，在vuex檔案夾下建立一個index.js檔案，作為vuex的配置檔案。然後在vuex檔案夾下再建立一個Modules檔案夾，用于放置子產品的狀态檔案。在Modules中建立一個Navi.js，用于存儲Navi子產品的狀态；建立一個Student.js，用于存儲我們即将要寫的student子產品的狀态。
下面是代碼
Navi.js
可以看到我們導出的子產品主要有四個部分：state，mutation，action和getter。state用于存儲子產品的狀态，這個“狀态”可以了解為在元件化開發下目前子產品的全局變量，即需要進行通信的變量。action用于送出mutation，我們可以在action裡進行異步操作。mutation是真正修改狀态的函數。而getter類似于vue中的computed計算屬性，這裡我們用不到，是以暫時不添加内容。
下面是Student.js
這個子產品就是我們即将要編寫的頁面子產品。這裡面的state存儲了兩個變量：一個是查詢所用到的表單，另一個是用于表示是否進行查詢的辨別flag。說到這，就不得不提到我們這次元件化開發，預計的程式運作的流程。這裡我們用Page1.vue作為表單和表格元件的父元件。
在頁面中表單内輸入資料
表單元件通過調用student子產品的action->mutation，将表單内的資料同步到state中
點選搜尋按鈕時，表單元件通過action->mutation，将state中的搜尋flag（初始化為false）置于true
Page1.vue中設定一個局部變量，将這個局部變量computed為state中的搜尋flag
将步驟4中的局部變量通過父元件->子元件方式傳值至表格元件中
表格元件中對這個接收到的值進行watch，當且僅當這個值由false變為true時，以state中的表單資料為搜尋條件，向伺服器發送請求，擷取資料并渲染
最後一步千萬不要忘了，表格元件還要通過調用student子產品的action->mutation，将state中的搜尋flag重新置為false。
可以看出這些步驟相對于非元件化程式設計來說很麻煩，但是它很好的解決了解耦的問題：表單元件不需要知道它的搜尋請求發給了誰，而表格元件不需要知道是誰發起的搜尋請求。如果你熟悉或使用過消息中間件，或是研究過訂閱釋出模式，你可以體會到相同的感覺。舉個例子：我們一般會使用websocket或一些其他方式來進行服務端對用戶端的消息推送。當我們從服務端推送“更新清單”的消息至用戶端時，用戶端的處理函數可以直接修改state中的搜尋flag而達到效果，自始至終都與我們編寫的表單元件不産生關系和耦合。
接下來是vuex中的index.js修改後的代碼
接下來就是表格元件和表單元件，比較簡單。
首先是表單元件
值得說明的是，如果想調用state的action，需要引入mapActions，也就是js代碼中的第一行
并且在methods裡用以下方式調用action
注意…mapActions是固定方式，不要修改。對于函數體裡面的參數，右側是action的名稱，也就是定義在vuex/Modules/XX.js中的action，而左側是action在目前元件中的“引用”名。換句話說，
的意思是使saveFormVal和changeStudentFormAction這個action綁定，這樣在目前元件中調用
實際上就是調用changeStudentFormAction({key: value})。
對于多個mapAction，用逗号隔開即可。
下面是表格元件。
接下來修改Page1.vue，修改後的代碼如下
注意這裡Page1.vue作為表格元件和表單元件的父元件，涉及到了與子元件傳值的問題。可以看到
這段代碼中，有一個
這句話的意思是把子元件中的searchflag變量與目前元件中的search變量進行傳值綁定。而目前元件中的search變量又是對于state中的搜尋flag的計算屬性，是以可以看出經過state和Page1兩個“中間件”的傳值，表單元件與表格元件進行了通信。
如果讀者回看上文中的表格元件的代碼，可以看到
這就是子元件從父元件中接收傳值的方式。
至此我們這一篇文章的開發就結束了。看一下目錄結構：
元件化開發除了可以做到解耦之外，在代碼複用方面也有很大優勢。比如，我們想在多個頁面中都展示同一個表格，那麼直接在其他頁面中用import的方式引入表格元件即可。如果需要複用的元件較多，我們可以在components檔案夾下單獨建立一個common檔案夾用于存放共用的元件。
注：由于篇幅原因，表格元件内隻對id的搜尋進行響應。
源碼下載下傳位址：
<a href="https://github.com/tjfy1992/Vue-ElementUI" target="_blank">https://github.com/tjfy1992/Vue-ElementUI</a>