vue+vux+axios+vuex+vue-router的項目的理解

　　本文主要是講解項目前期的工做，後期考慮再詳細說明。

　　做爲一個技術團隊若是大家團隊選擇了上面的技術棧，這說明大家的技術團體對於vue有很熟練的掌握了。在這裏我想說明的是前期架構的重要。這裏有一遍博客寫的很不錯，點擊這裏,主要是講解如何高效的開發一個項目。

　　若是你選擇了以上的vue技術棧，那麼你在前期至少要考慮兩個問題:

　　　　（1）vuex如何去配置，那些東西應該放在store？State、Getters、Mutations、Actions、Module如何去處理？

　　　　（2）vue-router應該如何去分配，怎麼作纔是最優的，傳遞參數是採用params的方式仍是query的方式.

　　下面就一個一個問題來看看,

　　1.vuex的處理，這裏能夠參照官方文檔，在這裏就粗略的介紹一些在下的見解。

　　　　State裏面通常放那些數據，若是你的項目對於用戶來講是區分權限的，那麼這麼用戶權限等級就徹底能夠放在這裏。通常來講，在State裏面存的都是全局意義上的東西，好比你要用的全局數據，全局狀態。如何把store裏面的State導入vue組件裏面，在這裏就不細說了，請參照上面的官方文檔連接。

　　　　Getters,通常是用於過濾State的數據以下圖：

　　　　

　　　　Mutations,它是同步的，用於去改變Store的狀態。

　　　　Actions,通常異步改變Store的函數會在Actions裏面，它提交的是Mutations。而在Actions裏面能夠不少操做以下圖：　

　　　　

 　　　　如上圖，能夠看到使用async/await能夠實現讓異步變成像同步同樣實現。

　　2.vue-router應該如何去分配，怎麼作纔是最優的，傳遞參數是採用params的方式仍是query的方式？

　　　　關於這個問題，我認爲同樣儘可能去提取頁面間的公共部分，經過路由去減小這些東西的渲染次數，提升用戶體驗。在vue官方文檔中，有一個keep-alive組件，配合router-view組件能夠減小組件的渲染。有興趣的同窗能夠去看一看.

　　　　對於vue-router的優化主要是把vue文件合理的打包成不一樣文件。以下圖

　　　　

　　　　若是一個路由的組件較大，簡易打包成一個js文件,較小的幾個文件能夠打包成一個js文件，這樣能夠減小請求次數。

　　　　傳參方式這個看vue-router的動態路由匹配，我認爲這個動態路由配置的方式傳參，它破壞了子路由命名空間。建議使用query方式傳參也就是http：//？name=""這樣的形式。

　　總結若是你的項目使用了，vuex、vue-router不妨在項目開始前考慮一下這些東西，謝謝閱讀！！