虾米带你轻松搞定Vuejs 系列

（十）技术指引1-组件职能划分

今天在整理笔记的时候，我思考了很久要不要写这篇笔记，最后决定把他写出来，因为里边有些东西我是查阅了一些资料才搞明白的。记下来，2点好处，一是加强记忆；二是做个备忘。

说起组件，在当先流行的一些前端框架都是极为推崇的，是主流框架中模块化、组建化开发模式中不可缺少一种形式。是不是组件就可以随便写呢？

带着这个问题，我们探讨一下组件的职能，我个人认为不同的组件可能实现的功能和设计思路也不同。有些组件需要挂载在其他组件中使用，有些组件可以独立存在。那么这些组件在配合中就体现出了自己的职能，在职能中又如何写出可维护、低耦合的前端代码呢。

 

如何划分职能

如果将Vue的组件按照职能划分,对于这个智能的划分网上各种说法都有，我借鉴了react的文档决定把他划分为容器组件和木偶组件（个人理解哈。仁者见仁智者见智）；

容器组件就是他是一个容器性质的组件，或者称之为很多个木偶组件装载的容器，简单的一句话，你可以理解为父组件或者顶层组件；根据个人喜欢，一般我喜欢放在container文件或者views文件中；

木偶组件，意思是组件用于展示或者呈现，这类组件没有自己的逻辑，之负责接受父组件传递过来的数据，仅仅实现自身内部的逻辑。

我们画个图来表示容器组件和木偶组件的关系吧

我们就以上述的简易图为例，我们可以看出容器组件是整个简易博客的父组件，而列表、统计、关注度都是博客的木偶组件，这里我打断直接用vuex来管理我的博客的状态。刚好也没能增加难度。

vuex引入

这里没什么好说的直接安装vuex插件。分别配置vuex的四大金刚（mapState, mapGetters, mapActions, mapMutations）这里不详细说了，因为这东西不是一两句话能说清楚的。vuex知识点不清楚的话直接看vuex的官方文档：https://vuex.vuejs.org/zh/guide/state.html

配置四大金刚

首先我们分别针对state、actions、mutation、getter做配置，以我们画的图为例子，

 

 

 

编写容器组件

在编写容器组件的时候一定要记得我们这里要使用vuex，建议使用官方建议的写法。

废话不多少，直接上主要代码：

 

这时候我们发现容器组件已经ok，这里涉及到的知识点有vue的生命钩子的周期，这里不记录了，忘了就百度一下。

编写木偶组件

现在我们来分别编写三个（Head、Count、AttentionRate）木偶组件；还是废话不多少，直接上代码。

 

 

三个木偶组件的代码编写基本完成，但是你仔细看，AttentionRate组件中有事件，这里怎么和容器组件交互呢？还是我们之前说的那样，木偶组件不做任何逻辑，当有事件触发时，直接调用容器组件mapMutations的方法去更改状态。

这里想要知道内部的玄机必须好好去了解vuex的状态管理器相关的知识点。

 

容器组件和木偶组件都完毕了，那么我们来跑一下，在跑项目之前一定要记得先配置router。运行了npm启动命令，我们看到没有任何的错误，直接打开了一个新窗口，如下：

点击一下上边的导航，切换到博客，因为我们主要测试博客功能。

发现我们的组件全部加在正常，那么这个时候我们来试一下木偶组件中的增加关注度事件是否管用。

 

点击了一下，发现完全正确。多尝试几次也是一样的。非常完美。其实这里还要多说一下，这个状态管理器还帮我们维护了每次切换路由后再次进入到博客页面的一个状态，这个状态记录了访客进入博客页面的次数。到底是哪里在起作用呢？不兜圈子了，翠花上代码：

那么只看代码没啥意思，直接看效果当我第一次进入博客的页面时，看到他的初始化访问量显示的1；点击其他的页面在切换回博客，这里我切换5次做个测试。结果呈现如下：

完全正确，再看一下控制台，没有报错。

 

总结

今天的笔记主要记录了组件的职能划分，以及一些组件之间的概念、关系。又通过状态管理器来管控组件之间的状态。这样做的好处，是组件之间充分解耦，各司其职。符合三高（高效、高质量、高级）标准。