[组件库][交互] 筛选-状态机

118 阅读2分钟

X轴变化

image

image

  1. 日期选择器选择多天,X轴显示为多天;日期选择器选择单天,X轴显示为 24小时
  1. 查看多天数据,X轴显示 [day1, day2, day3, day4...., endDay]
  2. 查看当天数据,X轴现实 [00, 02, 03, 04, .... 23]

在这里, X轴 的计算 并不是依赖 后端的API返回【因为返回的数据可能会有天数缺失,后者小时缺失】,而是前端在日期选择选的时间范围

举例子: 日期选择器选择多天,X轴显示为多天; 日期选择器选择单天,X轴显示为 24小时

查看多天数据,X轴显示 [day1, day2, day3, day4...., endDay] 查看当天数据,X轴现实 [00, 02, 03, 04, .... 23]

各位前端同学,你们的筛选条件是 存在 vuex 里面还是 当前筛选组件中的?

前端同学A: 要保留状态的话就vuex 」


大部分都是要保持状态的,比如我选择了 「2020-04-01 --- 2020-04-06」,点击了「搜索」,结果出来之后,不能把我的查询条件reset 吧

要不我就会有点迷惑:我现在看的图,是什么查询条件得到的?

image image

图上 1 和 2 是联动的其实 假如我选择了多天 -> 搜索 -> 柱状图显示为多天的数据了

现在我在日期选择器选择了单天:04-01 号,日期选择器变成了 04-01,没有点击搜索,这时候如何让 柱状图的 X轴 不跟着日期选择器联动呢(因为没有点击搜索)?

是不是有一个 currentFilterState 和 nextFilterState 的概念?

也就是所谓的状态机 [Facepalm]

xAxis<X轴坐标> = computed(vuex.currentFilterState.daterange)

也就是说日期选择器的改变只会更新 vuex.nextFilterState.daterange,点击搜索的时候,会把 nextFilterState 同步为 currentFilterState 不知道各位你们是怎么做的呢?求个建议,或者我不知道我这样是不是好的,不太确定

这时候才会对 vuex 或者 redux 中的 state 这个词有了更多的体会!