Dialog和ShelfGroupDialog的基本实现思路：
加入两个组件，一个是Dialog移出分组的弹窗，一个是ShelfGroupDialog，一个是create-api中加入这个ShelfGroupDialog
接下来我们看看这个移动书籍这个对话框的实现原理
如下，用ifNewGroup来判断是否是新更状态，如果是新更状态即展示下图1那种弹窗，否则展示下图2那种弹窗
实现选择一本电子书移到某个分组中
在循环展示出分组名称中绑定一个点击事件onGroupClick
是通过看你点击的edit是什么来判断你点击的是新建分组还是移出分组还是某个分组名，我们这里先讲点击的是某个分组名
该方法中，我们遍历书架中的图书找到被选中的图书们，然后看这本书否存在于我们的被选中的图书中，如果在我们被选中的图书中那么我们就把它过滤掉（即我们选这些书要加入某个分组了，我们就需要把这些书从书架图书列表中删除，因为图书列表中的书是作为状态1的方框图书展示在书架列表的嘛，移到分组中了这里就肯定没有这些书了，即把选中的图书们从书架中过滤掉），然后就会得到一个结果，得到这个结果以后我们就会调一个setShelfList即对书架的数组进行更新。更新完了后我们在then中做操作，我们获取到ground的itemList，即这个分组的图书列表，把选中的图书们即这些要移到某分组的图书们和这个分组以前的图书们做个相加融合，并且加上index标识
实现点击新建分组，添加分组名后这个新的分组就添加到后面
接下来给书架列表过渡动画
想深入了解transition-group可以到vue官网中看
如下给最外层加入transition-group，transition-group和transition不同的是transition-group会给它包含的每一个item都添加class，和transition不同的是它将以实际DOM的形式存在所以加个tag="div"它就会以div的形式存在，增加id即class的id
书架分类列表开发
现在分组页面我们暂时还是点不进去看到分组页面的，现在我们就先把分组页面实现
在views下的store中新建一个StoreCategory.vue，并且到router.js中加入这个path
我们回到ShelfItem中添加点击分组时跳转路由到书架分组页并且传入参数是哪个分组
如下，点击分组时，就会跳转到category这个分组中
这个书架分组页面也是用了ShelfList组件，但是书架首页的图书列表跟分组中图书列表肯定数据是不一样的，所以我们到vuex中定义两个变量，一个是分组列表中的图书数据即shelfCategory，一个是currentType即当前是书架列表页还是分组列表页，以便返回相对应的图书列表数据
在书架首页中就获取书架列表的图书数据，并且设置当前为书架即currentType为1
在分组列表中就获取分组列表的图书数据，并且设置当前为分组即currentType为2
然后到mixin中定义获取分组数据的方法，如下先获取书架图书数据，然后过滤找到这个分组的数据，然后保存到vuex的shelfCategory中
然后在ShelfCategory中调用ShelfList时，传入获取的分组图书列表的数据，才有图书展示出来
接下来做分组中图书移出分组的功能
修改分组功能开发
处理编辑、修改分组、清除缓存、返回按钮图标这些的显示与隐藏
分组中点击编辑的时候，左上角的返回箭头变成修改分组按钮，可以修改分组名称，也可以删除这个分组；当我们加入一个空的分组，右上角没有编辑变成了修改分组
使用计算属性把按钮状态正确显示，如书架中和分组中有图书的情况下都显示编辑按钮，如分组中没有图书时就显示修改分组在右上角不显示编辑等这些
接下来我们实现changeGoup方法，即点击修改分组按钮的方法
如下，给修改分组按钮绑定changeGroup事件，事件中调用create-api中的popup，即创建popup弹窗组件，然后在popup组件中我们可以看到，它是props接收btn，这个btn是一个对象即按钮对象，而且是个数组即可以是好几个按钮传过来，即你需要多少个按钮，按钮什么文字什么类型按钮监听什么事件
如下我们可以看到我们定义了一个createPopupBtn的方法来创建按钮对象，对象中有按钮文本按钮类型和按钮监听什么事件这里是点击事件。然后我们在create-api调popup时就往里传了三个btn对象，如this.createPopupBtn('修改分组名称',()=>{this.changeGroupName()})就表示创建一个叫'修改分组名称'的按钮，然后这个按钮监听点击事件，点击事件触发的时候就去调这里面的changeGroupName方法，类型为normal
接下来我们就实现修改分组名称的按钮和删除分组的点击事件
如下调用create-api的dialog，并且往里传这两个参数，这两个参数一个是展示移动书籍弹窗还是新建分组弹窗，一个参数是这个分组的名称，即让弹窗中直接展示这个分组名称为当前分组名称
这样点击修改分组的修改分组名称后就出现下面这个弹窗了
点击修改分组的删除分组按钮后删除分组的方法如下，展示一个新的popup分组
再做deleteGroup方法，删除分组主要做两件事件，第一件就是把分组中的图书移到书架中，第二步是删除分组
移出图书我们写过moveOutFromGroup，就是把图书移出分组放到书架中，所以我们这里就直接用它
如下，deleteGroup中如果当前分组不为空则先把所有图书置为被选中状态，然后把图书们全部移出分组放到书架中，然后再onComplete中删除这个分组
