vue全家桶(Vue+Vue-router+Vuex+axios)（Vue+webpack項目實戰系列之二）

Vue有多優秀搭配全家桶作項目有多好之類的咱就不談了，直奔主題。

1、Vue

　　系列一已經用vue-cli搭建了Vue項目，此處就不贅述了。

2、Vue-router

　　Vue的路由，先獻上文檔（https://router.vuejs.org/zh-cn/）。

　　路由在全家桶裏面定位是什麼呢，建立單頁應用！簡單！咱們知道Vuejs是一系列的組件組成應用，既然是組件那麼就須要組合起來，將組件(components)映射到路由(routes)，而後告訴 vue-router 在哪裏渲染它們！

　　咱們通常在APP.VUE文件裏面使用router-view來告訴router在哪裏渲染組件，以下圖（keep-alive被我註釋了後續系列繼續講）：

　　

　　組件的配置：（此處有多個文件夾是便於管理大的項目，模塊化。對於小項目能夠只要router下面的index.js就行）。

　　至於路由配置中的resolve和require還有export default能夠參考這篇文章（http://www.cnblogs.com/Nutrient-rich/p/7047877.html和Vue按需加載提高用戶體驗）

　　

　　路由按照上面的寫法就配置好了各個路由，那麼在頁面之間須要路由跳轉怎麼作呢$router.push()和$router.replace()就能作到了。

　　

　　路由嵌套：在子組件裏面再增長一個router-view，而後配置成【路由嵌套在動畫的時候會有坑，後續更新】

　　

　　至此項目中用到的路由基本能搞定了。

 3、vuex狀態管理

　　仍是先獻上文檔（https://vuex.vuejs.org/zh-cn/）

　　Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。什麼是狀態管理？能夠簡單理解爲管理數據流，多頁面共享一個data庫（全局）。

　　何時用我就借用文檔語言了：

　　　　

　　說到vuex就確定會有State、Actions、Mutations、Getters、Moudles

　　(1)State

　　Vuex 使用 單一狀態樹 —— State，用一個對象就包含了所有的應用層級狀態。就是放頁面共享數據的地方。（私有數據仍是放本身.vue文件更好）

　　（2）Actions　　

　　Action 相似於 mutation，不一樣在於：

• Action 提交的是 mutation，而不是直接變動狀態。
• Action 能夠包含任意異步操做。

　　就是說異步方法放入Actions，如ajax請求，求情獲取到數據以後顯示提交mutation裏面的方法來改變state。

　　（3）Mutations

　　更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。一條重要的原則就是要記住 mutation 必須是同步函數。組件中使用 this.$store.commit('xxx') 提交，在action裏面使用commit('xxx') 提交。

　　（4）Getters

　　有時候咱們須要從 store 中的 state 中派生出一些狀態，Vuex 容許咱們在 store 中定義『getters』（能夠認爲是 store 的計算屬性）。Getters 接受 state 做爲其第一個參數：

　　

　　Getters 會暴露爲 store.getters 對象供調用。

　　

　　（5）Modules

　　簡單點說就是爲了方便操做和管理，模塊化。

　　因爲使用單一狀態樹，應用的全部狀態會集中到一個比較大的對象。當應用變得很是複雜時，store 對象就有可能變得至關臃腫。

　　爲了解決以上問題，Vuex 容許咱們將 store 分割成模塊（module）。每一個模塊擁有本身的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行一樣方式的分割。

　　最後上幾張圖方便查看具體寫法：

　　

　　

　　

 

 4、axios

　　就是封裝的ajax,能夠根據本身的項目狀況再進行封裝，而後action中調用。具體能夠參考https://github.com/mzabriskie/axios

　　

　　結語：再接再礪！