Vue递归组件+Vuex开发树形组件Tree--数据模块

      其实最开始并没有采用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给后台,如果后台返回成功那么就执行自定义添加或者删除的代码就是了。现在是这样的效果:

添加删除会动态增加与删除

一个基本的树状菜单就开发完成了,改这个操作也很简单,说一下就不写了,点击修改将当前标题标签切换成input标签,输入完成再赋值给当前元素即可,也是要向后台传递的。还有一些可以优化的地方,现在每次点击都会发送axios请求,需要优化一下:

在loadTreeNode这个方法中,给data新增一条属性,来标记是否加载:

在api.js添加公共函数

然后在每次点击的时候判断当前id的isLoad是否为true,为真则return

现在树形插件已经开发完成了,需要根据上一篇来一起实现,链接:Vue递归组件+Vuex开发树形组件Tree 

因为当时使用element-ui组件树,各种bug,无奈自己手写一个组件树插件,时间比较仓促,有些优化和封装的地方没有去考虑,找个时间封装个组件。

谢谢!

推荐阅读更多精彩内容

  • 写在前面 首先,本篇文章所开发的组件并非一个已经开源的上线组件,所以如果你急于需要一个插件来只做你的项目,那么并不...
    冯阳阳的博客阅读 3,771评论 0 28
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 117,139评论 15 132
  • 树,西瓜,椅子~ 喜欢这种夏天的感觉,而且特别复古,像小时候的夏天。 树叶的形状让我想到了小时候看的动画,于是就画...
    打油超人阅读 74评论 0 1
  • 奉律师朋友书。 (四尺对开) 取意于周易中的坤卦,坤者为地,辞曰:“龙战于野,其血玄黄”,野在这里作为平地讲,玄指...
    逸之何春雷阅读 902评论 11 29