在Vue项目中使用URL Query保存和恢复搜索条件的操作指南

import { isEqual } from "lodash-es";
import { useRouter, useRoute } from "vue-router";

export const useQueryStorage = <T>(key: string = "savedQuery") => {
  const router = useRouter();
  const route = useRoute();

  // 把对象以 JSON 的格式存入到 URL 的 querystring 中
  const saveObjectToQueryString = (obj: T) => {
    const query = parseSavedObjectFromQueryString();
    if (!isEqual(query, obj)) {
      router.replace({
        query: {
          ...route.query,
          [key]: encodeURIComponent(JSON.stringify(obj)),
        },
      });
    }
  };

  // 从 URL 的 querystring 中解析出对象
  const parseSavedObjectFromQueryString: () => T | null = () => {
    let query = route.query[key];
    if (query && typeof query === "string") {
      query = JSON.parse(decodeURIComponent(query));
      return query as T;
    }
    return null;
  };

  return {
    getQ: parseSavedObjectFromQueryString,
    setQ: saveObjectToQueryString,
  };
};

const saveObjectToQueryString = (obj: T) => {
  const query = parseSavedObjectFromQueryString();
  if (!isEqual(query, obj)) {
    router.replace({
      query: {
        ...route.query,
        [key]: encodeURIComponent(JSON.stringify(obj)),
      },
    });
  }
};

const parseSavedObjectFromQueryString: () => T | null = () => {
  let query = route.query[key];
  if (query && typeof query === "string") {
    query = JSON.parse(decodeURIComponent(query));
    return query as T;
  }
  return null;
};

return {
  getQ: parseSavedObjectFromQueryString,
  setQ: saveObjectToQueryString,
};

const { getQ, setQ } = useQueryStorage<{ keyword: string; page: number }>();

// 初始化时恢复
const saved = getQ();
if (saved) {
  searchForm.keyword = saved.keyword;
  searchForm.page = saved.page;
}

// 用户点击搜索时保存
function handleSearch() {
  setQ({ keyword: searchForm.keyword, page: searchForm.page });
}