Vue中如何利用Vuex实现递归树形组件的简单开发？

本文共计1712个文字，预计阅读时间需要7分钟。

撰写在前篇，首先，本章节开发的组件并非一个已开源的线上组件。因此，如果你急于需要一个插件来完成你的项目，那么这个组件可能无法直接提供你所需要的帮助。这个组件的开发计划将撰写两篇文章。

写在前面

首先，本篇文章所开发的组件并非一个已经开源的上线组件，所以如果你急于需要一个插件来只做你的项目，那么并不能带给你及时的帮助。这个组件的开发预计写两篇文章，一遍写组件，一篇写组件逻辑。这篇文章也是我自己开发的从无到有的过程，所以它可以为你提供一些Tree组件开发的思路，代码写到一定程度，不能完全依赖插件了，有时间可以看看插件源码或者动手去开发，这样真的能加深对技术的掌握程度。

开发过程

1.数据仓库-Vuex

2.组件的循环创建-递归组件

需求决定了我的技术选型，项目需求是一个中国各级政府列表的选择，后台基于大数据去汇总各级政府网站的文章决策，然后交给前端去展示，左侧显示各级政府的Tree，右侧显示具体文章。因为政府数据的不确定性，所以显示政府的Tree的每一层级也是动态获取的，就比如北京市下级的海淀区政府在一小时前可能不存在某某政策文章,那么北京市节点的子节点中就不会包含海淀区这一子节点，但是10分钟前网站发布了一篇文章,那么就需要在北京市中添加海淀区，为了良好的实时性效果,每一级的子节点都不固定。

因此 树状结构的data是变化的而不是在初始化的时候就固定好 的，数据驱动Dom的思想，data有多少层级，Dom就有多少层级，data不定，所以Dom也无法提前定义好层级，决定采用Vue的递归组件，组件递归自身实现无限制层级的渲染。