记录 - mixins的复用封装

 项目结构截图：

• api 下的module 的用途，由于项目比较大，api.文件比较多， 因此我都放module文件夹了，看着简洁一些
• libs 下面的文件 多数为 iview-admin 复制过来的，个别是本身之前封装的工具类，也统一的放libs 下了。 （欢迎吐槽，和指点意见）
• 项目中有不少二级文件夹，由于项目不少板块，因此我经过这样的方式区分出来，项目结构会变得简洁许多。
• store/module/app.js 是iview-admin 的 我没有改动，直接copy 的，由于菜单及顶部的 导航标签均为iview-admin 的功能。
• 项目也用了 jest 作单元测试（函数，不包括组件单元测试，欢迎一块儿讨论），这里有个坑，我直接使用jest,会报一堆错，百度无果， 而后就只能建了一个二级目录，结果一切正常， 外层报错和label 有关。 （有谁知道怎么解决的，告诉我，谢谢各位大佬）

mixins 使用之道：

项目中，目前就使用了两个mixins ,可是两个mixins 支撑了整个项目的功能运行。 （页面效果图）

注：这个界面的代码，对应上面项目截图的代码，没想到吧，上面那个界面看着功能，代码却就这么多。抛开 template 的布局，代码不多。 由于多数功能（列表，编辑，添加，移除）都已经交给mixin 处理了， 这里须要注意一点，这里有个baseListUrl 是每一个列表界面的基本地址，这里必定要和后台沟通，列表的 后缀必定要保证一致，否则你的mixin 就无法用了。咱们后台 （*/list [列表] */delete [移除] */addOrUpdate [编辑/更新]）

这个就是 list - mixin

这里介绍一下细节，其它的，请看源码都有注释。

1. mixin 初始化数据为何放在beforeMount ？ 答: 由于beforeCreate 组件尚未建立完成，而create 我又会做为 数据初始化的操做，好比请求参数初始化，为了不冲突，因此放在 beforeMount 最为合适。
2. 搜索参数为何会有两个？ 答：（由于listParams 的参数部分会双向绑定，若是不使用两个的话，当有筛选项改变时，又切换页码就会出现带参搜索了，因而每次搜索只会用searchParams参数，当点击搜索时，又会吧listParams请求参数赋值给searchParams，这样就能够避免双向绑定的尴尬了）
   
3. 其它问题，我暂时想不到，能够留言问我。 或者仔细查看我发布的源码。就能理解了。
4. 因此mixin 负责了界面的获取，页面的搜索处理及页码切换功能，凡是列表会涉及的操做我都放在了mixin 中，处理保证了代码最小量。
5. 固然若是你想定义你本身的搜索，能够直接在组件 methods 写一个getList ， 他就会自动覆盖mixin 的事件，简单方便，其它事件以此类推。

另外一个mixins (编辑/新增弹窗的mixin)

1. baseUrl 是做为编辑是获取单个数据的操做。 这里的url 通常和列表的baseurl 同样，因此我大部分都是直接传的baseListUrl 。
2. finish /cancel 事件为何要经过props 动态传入，而不是经过$emit 呢？ 答：若是使用$emit , 由于添加/编辑操做是在父组件的list-mixin里（我这里不可能再次引用一次 list-mixin），但这样的话，我通知了父组件，并把参数传过去了，父组件请求成功了，我又怎么知道在什么时候关闭当前的dialog呢？若是$emit 请求后就关闭弹窗，万一后台提示的是保存出错信息呢？ 这时候dialog 又关闭了，数据也丢失了。 尴尬！！！因此这里经过props 动态传入， 父组件的 addOrUpdate** 函数，会返回一个Promise 函数，当点击保存时，就调用this.finish(params).then(res={**},err ={**}) 若是成功我就关闭，不成功我也能够进行其它的相关操做，哈哈哈，机智 （这里我踩过坑，我第一次是经过的$emit ，没有考虑请求失败的状况）

结束语

• 由于上班的缘由，这里只写了mixin 的封装，可是这里的mixin 包含了全部列表的逻辑封装，也是精华。 经过这样的一个封装，平均我一天可以写3个界面，包含编辑/列表和其它的功能逻辑。 （不知道这个效率慢吗？）
• 开发过程当中，也碰见了一些坑。可是只要耐心搜索就能找到问题缘由的。而在等待后台接口的同时，在优化项目。让项目变得简洁。
• 项目结构但愿可以给大家达到帮助，同时若是有好的建议，能够一块儿交流。
• 代码我会放在git 上面，由于公司业务的缘由，我不能所有界面放上，可是我会保留两个不重要界面，给大家做为参考。及我会在git 的项目下，给大家留一个福利，但愿这篇文章能给大家一些帮助。
• 项目我会使用 mock.js 拦截模拟数据，若是想了解他，能够看看个人另外一个文章，关于mock.js 的使用的。

github.com/cgh1999520/…

Git 入口

注：上文中若是有侵犯你的利益，或其它侵犯，请联系我。