一 抽象 列表的本质与使命
抽象出本质，就是组合筛选条件，展示相应条件下的数据，然后根据这些数据参数，确保点击跳转能跳到相应位置。
二 这一版列表解决什么问题
1 拆开原本筛选条件大接口
修改后，一个大接口变为3个灵活小接口
分别是返回所有品牌、当前品牌的型号、当前型号的容量和颜色，解决之前一个性能优化的瓶颈点。
2 融合三条业务线的独立列表
3 代码直观易懂
- 组件没有过多的拆分
- 摒弃mixin的使用（原使用方式，每个组件都有引用mixin，甚至无用方法在被频繁调用）
- 代码本身没有过多骚气操作，并加了很多注释，再配合这个文档食用，肯定很容易懂的~
三 列表本身拥有的能力
1 即插即用
把我这个文件夹复制过去，就可以用了。 其实还想后续弄成npm发布的组件，甚至还想开源。
2 能够锁定渠道 品牌
如上图在官方自营的tab下面，转转服务是不允许取消勾选的
3 支持url配置 命中
如url后面加 filter=5462:2101002;5463:2101002635 ，则最开始会命中 华为 p20，支持品牌，型号。
4 侧滑筛选条件弹起时，在阻止掉后面内容滚动同时，记录之前滚动位置，增强体验
5 顶部tab切换，可缓存不同渠道的筛选条件，以及在此条件下的请求数据
四 页面组成
五 vuex数据介绍 与 筛选核心思想
业务数据介绍，筛选的key们
实现筛选
六 逻辑点拆分
1 数据初始化
1 app.vue 中 注册list组件的局部store
2 拿到前置条件，进行初始化
前置条件指的是渠道id 和 url链接中配置的filter，组件init方法，在两种情况下会调用
第一种 mounted 周期中，这时候init中参数 会有一个keyValue。
第二种 全局store 中的 chanelId改变的时候，这时候参数没有那个keyValue。
这个keyValue作用是，命中url参数中的配置字符串。所以只有在第一次init，也就是mounted中才有用。
3 初始化方法
初始化做了以下几件事
- 根据渠道 获取筛选信息，不同渠道的快筛条是配置不同的，并把筛选信息初始化
- 根据渠道id 强制改变selectedFilterGraph，这里的强制改变，和后文的勾选是有连带协同作用的。为了实现锁定的效果，在勾选的时候，比如勾选‘官方自营’，是不允许被切换的，此时就根据 全局的chanelId来做判断，如果全局的chanelID是5464，那么会禁掉5464的筛选项的勾选，所以！！！初始化的时候，要根据chanelId来初始化selectedFilterGraph。
- 配置的快筛条，因为不同渠道快筛信息不一样，这个比较直线逻辑
- 清空重置一些 如瀑布流数据 当前品牌的型号 当前型号的容量参数 ，这个也很容易理解
- 把url配置的命中参数，匹配到selectedFilterGraph中
2 触发筛选
- 每一个筛选项都是独一无二的，拥有一份key value
- 如果已经被认定是选中了，那就走取消选中的逻辑
- 如果没有选中，看这一组key，是否可以多选，不是的话，替换选中的value，可以多选的话，添加要选中的value
- 选中的都会被维护在 selectedFilterGraph 中，见下图
3 蒙层弹起后，禁止后面滚动，并能固定在，蒙层弹起前一刻的位置
以下两个图说明原理
4 缓存
- sotre.list 存的是什么？
