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不妨在项目开始前考虑一下这些东西，谢谢阅读！！