一、前言
部落客也是vue道路上的行者，道行不深，希望自己的東西能對大家有所幫助。這篇部落格針對 了解過vue基礎，但是沒有做過vue項目的童鞋。如果想看基礎指令，可以看我之前的一篇部落格，請點選 跳轉， 不過我還是建議看文檔比較好。os: Vue文檔是非常詳細的
二、準備
做vue單頁應用都需要會什麼？
1. vue的腳手架，直接幫你建好項目。再看看自己想要啥，補充啥！ os: Git 上有很多成品項目，可以找一個好點的拉下來
注： 路由按需加載、熱加載 等這些都是基礎功能，在這不多說。os: 慕課網有Vue的課程，網上有資源，挺不錯的
2. 引入并會使用 vuex。對共享變量進行統一管理，解決多層元件傳資料的問題。這個咱後面詳說。
3. 封裝 axios，對請求進行統一的管理，并減少代碼量。
三、關于vuex
出現背景： 了解過vue1.0的人應該都知道，vue的父子元件通信是很煩的，一層還好。如果有個3、4層，那父子元件通信，就頭疼了。以前，這是需要開發者捋清邏輯，在合适的地方修改并傳遞的。但是vue2.0為了解決這個問題，提出了vuex，狀态統一管理。
作用： vuex 将所有需要共享的變量放在一起，像一個倉庫一般，你想對倉庫中的變量 讀取、修改 ，直接調 指定方法就可以，超級友善。
結構： vuex的結構大緻為：
state: 存放所有變量
mutations 存放同步讀取、修改state的的方法
action 存放異步讀取、修改state的的方法
.......還有很多其他的 os: 這篇部落格隻是幫大家了解如何用Vue做單頁應用。
注： 1. 不是所有變量都要放到 state 中，vuex 創立的初衷是友善我們對變量的管理，然而對元件的一些私有變量，不需要和别的元件共享。是以，state裡面隻放全局變量、多元件共享變量。
2. 解釋一下 action ，所謂異步，就是在 action 檔案中寫方法，調 axios，然後再 調 mutations 同步修改state。很多人不了解，其實，這就是一個概念性的問題。action并沒有從根本上解決異步修改state的競争問題，但是我們需要了解、并将 異步這個操作 摘出來放在一起。
os: js腳本 本來就是同步的東西，一根筋，同一時間無法處理2件事，不存在多線程處理事務。不過，科技發展的這麼牛逼，大家懂得。這個異步、競争的思想還是要提出來的，指不定哪天就被大家研究出了解決方案。
四、關于vuex的具體使用
先看一下項目的部分目錄結構
1. state.js
state 檔案裡面存放一個state對象，具體的元素就是我們的變量了，需要什麼資料，群組件的data函數中一樣寫法。這裡隻是起到存儲作用
2. mutations.js
mutations 同步修改 state的值，僅僅是提供一個方法，接收參數，修改state值的檔案。就是一個存儲修改state方法的倉庫。
一般我們在開發的時候請求比較多，我們會建立一個 mutation-types.js 檔案，将所有函數用常量儲存。其實也沒什麼特殊意義，僅僅是将方法統一儲存，查找、維護比較友善而已。
3. action
action 異步修改 state 的值。說白了，action也是一個存放修改state方法的倉庫，但是 這些方法都是要調axios請求的(是以叫異步)，請求完事了，再調 mutations 去同步修改state的值。所謂的異步都是我們自己寫的。當然你不這麼寫也行，隻是設計者的初衷是想讓讓開發者清楚異步修改的概念，雖然暫時沒有解決根本問題。
這裡涉及到axios請求，這個下邊解釋，暫時先清楚 action的概念。
4. vuex群組件通信
上述介紹了 vuex的幾個部分的作用，那現在就是如何在元件中去使用 vuex
首先，在main.js中，你需要将store對象引入到整個應用中
然後在元件中使用
簡單介紹一下：
this.$store.state. 我們通過$store對象 ，直接使用state中的屬性
this.$store.commit('', {}) 通過 commit 方法調 mutations-types 中的方法（其實就是mutations的方法），這步是同步的，而且資料會自動監聽變化就行渲染
this.$store.dispatch('actionTest').then(() => {}) 通過 dispatch 的方法調 action 的方法，異步修改 state
注：vue中的這個 this 注意他的指向，建議不确定時，先将this賦給變量儲存起來，有時經常會和window對象混淆。
以上就是vuex最基礎的用法，也是最常用的方法。其他的像 getters 、如何元件中引入vuex等等，這裡就不細說了，大家可以根據自身需求自行看文檔補充。
五、 封裝axios
在一個完整的項目中，我們的和服務端的互動會很頻繁，一個項目會有很多請求，備援代碼很多。是以将請求封裝，統一管理還是很有必要的。我們現在做一個簡單的封裝。
1. 先看一下結構
2. 看一下具體代碼
axios.js 檔案
index.js 檔案
這裡我們僅僅做了post 請求的封裝。先對axios做上預設請求的資料，封裝成函數，有傳參就合并修改參數資料，請求結束之後，根據response、error，分成成功和失敗兩個函數，并将整個promise對象傳回。對于請求的攔截這裡沒做。而且對網絡請求的錯誤碼也是大家根據項目具體提示的。我這裡也不做詳細的說明了
3. 元件中使用
将封裝的axios引入元件，然後直接調用即可
六、總結
以上就是 vuex+axios封裝的執行個體，時間原因，這裡進提供思路和簡單的實作方法，至于具體項目具體分析，axios要怎麼封裝，vuex還需做什麼監聽，那就是大家為自己項目定制的東西了。
好了，以上就是整篇部落格的所有内容，希望對大家有所幫助。如果，文中有錯誤的地方還請大家及時指出。
如果喜歡我部落格的朋友可以添加個關注，以後多交流技術問題！近期還會在更新一些react的部落格。