on-query-updated

Mixin 该 Vue 组件，给页面增加一个响应 $route.query 变化的 onQueryUpdated 回调吧！ 项目地址

使用场景

对于 keep-alive 的页面来说，无论是分页还是搜索，该类业务都可抽象为去改变当前页 url 中的查询参数，然后在 onQueryUpdated 回调中拿着查询参数去获取数据就好。你不需要在 created 时获取一下数据，某个响应查询参数变化的地方再获取一下数据了，你只需要：

import onQueryUpdated from 'on-query-updated'
export default {
  mixins: [onQueryUpdated],
  // 该回调会在组件 created 和 $route.query 变化时触发
  onQueryUpdated(query, diffResult) {
    console.log(query, diffResult)
  },
}

另：查询参数映射在页面的 url 中的好处是保持了数据展示的一致性，直接将页面的 url 分享出去就相当于分享了当前你的页面状态，便于协同工作

安装

npm install on-query-updated

onQueryUpdated (query: Query, diffResult: DiffResult)

• query: 当前 Query 对象
• diffResult: 与上次的 Query 对象的对比结果

如果一个页面有多个 Query 业务，可以利用 diffResult 参数来实现各自业务监听各自 Query 字段的变更。比如，某页面既有用户查询，又有产品查询，那用户的查询参数变更显然不应该触发产品查询