记录 - mixins的复用封装-CSDN博客

项目结构截图：

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

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

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

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

baseUrl 是作为编辑是获取单个数据的操作。这里的url 一般和列表的baseurl 一样，所以我大部分都是直接传的baseListUrl 。
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 入口

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