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

梦里梦外; 2022-05-23 02:05 229阅读 0赞

本文主要是讲解项目前期的工作，后期考虑再详细说明。

作为一个技术团队如果你们团队选择了上面的技术栈，这说明你们的技术团体对于vue有很熟练的掌握了。在这里我想说明的是前期架构的重要。这里有一遍博客写的很不错，[点击这里][Link 1],主要是讲解如何高效的开发一个项目。

如果你选择了以上的vue技术栈，那么你在前期至少要考虑两个问题:

（1）vuex如何去配置，那些东西应该放在store？State、Getters、Mutations、Actions、Module如何去处理？

（2）vue-router应该如何去分配，怎么做才是最优的，传递参数是采用params的方式还是query的方式.

下面就一个一个问题来看看,

1.vuex的处理，这里可以参照[官方文档][Link 2]，在这里就粗略的介绍一些在下的看法。

State里面一般放那些数据，如果你的项目对于用户来说是区分权限的，那么这么用户权限等级就完全可以放在这里。一般来说，在State里面存的都是全局意义上的东西，比如你要用的全局数据，全局状态。如何把store里面的State导入vue组件里面，在这里就不细说了，请参照上面的官方文档链接。

Getters,一般是用于过滤State的数据如下图：

![1167719-20170517200400994-1213758365.png][]

Mutations,它是同步的，用于去改变Store的状态。

Actions,一般异步改变Store的函数会在Actions里面，它提交的是Mutations。而在Actions里面可以很多操作如下图：

![1167719-20170517200652041-1164363575.png][]

如上图，可以看到使用async/await可以实现让异步变成像同步一样实现。

2.vue-router应该如何去分配，怎么做才是最优的，传递参数是采用params的方式还是query的方式？

关于这个问题，我认为一样尽量去提取页面间的公共部分，通过路由去减少这些东西的渲染次数，提高用户体验。在[vue官方文档][vue]中，有一个keep-alive组件，配合router-view组件可以减少组件的渲染。有兴趣的同学可以去看一看.

对于vue-router的优化主要是把vue文件合理的打包成不同文件。如下图

![1167719-20170517201910432-888032188.png][]

如果一个路由的组件较大，简易打包成一个js文件,较小的几个文件可以打包成一个js文件，这样可以减少请求次数。

传参方式这个看[vue-router的动态路由][vue-router]匹配，我认为这个动态路由配置的方式传参，它破坏了子路由命名空间。建议使用query方式传参也就是http：//？name=""这样的形式。

总结如果你的项目使用了，vuex、vue-router不妨在项目开始前考虑一下这些东西，**谢谢阅读！！**

[Link 1]: http://mp.weixin.qq.com/s/tHypCzvVDHzveY70o5UkmA
[Link 2]: https://vuex.vuejs.org/zh-cn/
[1167719-20170517200400994-1213758365.png]: /images/20220523/ca04f1504cd14e12b4c94338eaff44c3.png
[1167719-20170517200652041-1164363575.png]: /images/20220523/04da29c86c2a43e680773bc7d7ed9e5e.png
[vue]: http://cn.vuejs.org/v2/api/#keep-alive
[1167719-20170517201910432-888032188.png]: /images/20220523/f4621b176085499fae61d3ba34b19fd9.png
[vue-router]: http://router.vuejs.org/zh-cn/essentials/dynamic-matching.html