Vue2 Composition API下beforeRouteUpdate路由变更后商品数据更新滞后问题

问题根因 #

触发beforeRouteUpdate钩子时，组件实例的$route尚未更新为目标路由的参数，此时调用refetch()用的还是旧的分类slug作为请求参数，所以拿到的是上一次分类的商品数据，等路由真正更新完成后也不会重新发起请求，自然就出现了数据滞后一次的现象。

另外你封装的useGraphQuery存在不符合Composition API规范的逻辑，也是导致商品查询无法像分类查询一样自动响应路由参数变化的核心原因：

• 你在useGraphQuery开头加了if (!params?.value)的条件分支直接返回静态ref，这种写法会导致如果初始调用时参数为空，后续参数变更时也不会执行useQuery逻辑，失去了自动响应参数更新的能力；
• 你注释掉了useQuery的enabled配置项，原本可以通过这个配置项自动控制请求时机，不需要手动做参数非空判断。

最优解决方案（推荐） #

无需手动调用beforeRouteUpdate，修改useGraphQuery的实现，让查询自动响应路由参数变化，和useGetCategory行为保持一致：

import { computed } from "@vue/composition-api";
import { ref } from "vue-demi";
import { useQuery, useResult } from "@vue/apollo-composable";

export function useGraphQuery(params, gql, pathFn, clientId = "apiClient") {
  // 移除开头的条件判断，始终调用useQuery，遵循Composition API调用规则
  const { result, loading, error, query, fetchMore } = useQuery(gql, params, {
    clientId,
    enabled: computed(() => !!params?.value), // 开启响应式请求开关，参数有效时才发起请求
  });
  const response = useResult(result, null, pathFn);

  return { response, loading, error, query, fetchMore };
}

修改完成后直接删除组件里的beforeRouteUpdate钩子即可，路由参数变化时useQuery会自动监听参数变更发起新请求，商品数据会和分类数据同步更新。

临时解决方案（如果不想修改封装逻辑） #

如果暂时不想调整底层hooks，只需把refetch的调用放到next的回调中，等路由更新完成后再执行刷新：

beforeRouteUpdate(to, from, next) {
  console.log(to);
  next(() => {
    // 路由更新完成后$route已经是最新参数，此时刷新才会拿到正确数据
    this.brandsQuery.refetch();
    this.productsQuery.refetch();
  });
}

额外注意点 #

你封装的useGetMore函数里直接修改params.search.page，而params是响应式computed变量，不能直接修改，建议把分页页码单独抽成ref变量维护，避免出现赋值警告。

内容的提问来源于stack exchange，提问作者r3plica