本文主要是講解專案前期的工作，後期考慮再詳細說明。

　　作為一個技術團隊如果你們團隊選擇了上面的技術棧，這說明你們的技術團體對於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不妨在專案開始前考慮一下這些東西，謝謝閱讀！！