其实最开始并没有采用Vuex，因为Vuex相对于$emit这类事件监听需要多写很多代码，而且步骤也是比较繁琐，如果你想保持一个状态管理库，那么你就按照Vue指定的套路出牌，需要提交mutations来统一改变状态。最开始采用$emit事件监听的方式，因为会有增删改的操作，就由父组件监听，然后将data数据源逐级传递，但当层级变大的时候，数据变得难以维护，大量的监听操作，相对于不可控性，还是选择了Vuex稳妥的作为统一仓库管理。

Vuex设计

Vuex不做详细介绍了，可以搜索文章自己去理解，总之你如果使用Vuex就要遵循一个原则，你如果需要修改store中的某个状态，一定要通过commit-mutations的形式或者异步提交dispatch的形式，这样你可以跟踪一些状态的变化，这是一个行为上的约束，你也可以直接修改state，那么当数据状态出错的时候并不能定位到原因所在。

store下新建index.js

我的项目中目前维护了两种状态一种是Tree数据，一种是公共的loading的状态，为了可拓展性，将index.js分离成modules的形式，每新增一个状态库只需要增加一条，而不需要频繁修改index.js的代码。

data_store.js是本文主要讲的数据的仓库如下：

很简单，修改data与提交的操作。

仓库写好了，那么现在就开始交互的部分。

需求是，每点击一层，那么就去请求后台获取他下一层的数据，有数据则展开下拉。并且每一个node节点都有增删改的功能。好一样样来写

开发前先写一个公共类库，集中一些axios请求和工具函数。首先，想一下交互的思路，已知后台会返回每一节点的唯一id，点击这个节点的时候根据id向后台发送请求获取当前id下一层数据，当得到一个节点的数组的时候如何插入store中的data仓库？换句话说插入到data中的哪一层？删除也是一样，得到点击id了，那么删除data的哪一层节点？因为是数据驱动视图，所以我们只增删改data仓库，那么Dom就会触发相应的更新。因此需要一些递归函数来辅助操作。

新建api.js

1.封装后台Post请求

2.封装接口：

3.递归添加与删除公共方法

递归：传入id和对比的对象数组，首先对比根层级，如果id匹配执行相应的增删，如果不匹配则向下nodes[]中去查找，还不存在则递归查找。上面两个函数封装了后台获取数据增加与删除的函数，还需要封装自定义添加的函数，可以自定义添加数据，而不是后台获取的数据，原理相同，只是增加一个数据模板。

函数比较简单就是一个递归函数，封装好那么就在TreeMenu.vue进行调用了，引入（后边还会添加一些公共函数，这里就先引入了，就不逐步截图了）

添加loadTreeNode后台获取节点的函数：

首先会传递一个id，根据id向后台发送请求，然后获取到数据按照定义好的格式push进一个临时的对象dataCache。这里要说明一下为什么没有直接push进store中的data仓库，而是先全部push进一个临时对象呢？我对Vuex的理解是，他是一个仓库，你去取东西或者存东西，你是一样样的去放，还是等这次的数据都准备好了再去一次性的去放？为了便于跟踪状态变化（store的debugger模式或者VueTools），我选择将这次请求的数据作为一次状态变化去改变。下面的递归插入也是一样，都是临时设置一个数组，只操作这个临时的数组而不去频繁去修改store中的数据，最后一次修改，这样的结果会更准确定位状态变化，也不会频繁修改仓库造成不可控的后果，唯一的影响可能会有几十ms的循环延迟，相比较于安全性，这几十ms的性能不考虑。

在上篇文章预先写好的toggleChildren方法插入如下代码：

这样就为每一层node节点绑定了点击事件，点击获取数据显示。但是这只是点击事件，那么第一次加载页面的时候是没有根数据的啊，所以要在Tree.vue中写一个初始化的函数，初始加载根节点：

在Created中调用（已经跟后台确认根节点id，调用时id直接赋值即可）

这样一个树状菜单点击加载就做好了

自定义添加与删除

TreeMenu.vue新建两个按钮：

图中高亮显示

绑定方法：

dataTemplate是一个添加的数据模板，可自定义添加，this.count是定义的一个变量，保证每次id都不同。实际上添加和删除是要走后台的，上面写的这种是前端页面的添加与删除，因为需求变了，所以没有继续往下写，但是思路和上面后台获取添加是一样的，点击传递id给后台，如果后台返回成功那么就执行自定义添加或者删除的代码就是了。现在是这样的效果：