Decorator｜实践－－将搜索参数写入url

项目背景

        一些历史原因，在项目（vue框架）中很多任务列表（超过60个）在做搜索和分页功能的时候，都没有做搜索参数（Search组件）和分页参数（List组件）的存储，这样会导致2个问题：

        问题1.用户A当前搜索了xx，并选择了第二页，复制url给用户B，此时用户B打开后显示的不是A用户搜索条件的数据。

        问题2.再次刷新当前列表，会将当前参数清空。这样的交互体验明显是有问题的。

        所以我们想出了如下几个解决方案。

解决方案

    A.将参数（搜索参数＋分页参数），存入vex中的store。

    B.将参数存入本地存储，cookie，localStorage等。

    C.将参数存入url

方案分析

        A－存入store是项目60个列表中某些已经这样实现的，Search组件和List组件共享store中的［搜索］数据。

        B－存入本地存储，每个任务列表 搜索区或分页数据改变时，将数据写入，然后对本地存储中的这些数据进行监听，做到Search组件和List组件的数据共享。

        C－存入url的query参数。在任务列表中对route进行监听，从而解决上面提到的两个问题。因为存入url中，这些数据是可跨终端传递的。

应用分析

        上面三种方案其实都是可行的，但是考虑到链接分享这种场景，最终我们采用方案C。

        方案确定好后，问题来了，我们的列表数量非常之多。这样一个个在列表的Search组件和List组件去做url中query的写入和监听，是件异常辛苦的体力活。同时，不排除以后有什么场景或需求要继续对query做读写操作。如果在

基本实现

Decorator代码

使用此Decorator的任务列表代码

总结：

首先看采用此种方案后，后期需求迭代代码的灵活度会高很多。如果有对query变化后项目所有任务列表都需要做的事情，可以在Decorator代码的set中去做。

然后说一个对**Object.defineProperty**的小总结。这里对baseQuery的赋值，以下两个写法是有很大区别的：

1. this.baseQuery = { a : 1}

2. this.baseQuery.a = 1

因为Object.defineProperty的set是没有递归进去的。

完。