Vue自定义Hook示例：useUrlState

简介

本文将介绍如何基于vue3自定义一个hooks，参考React ahooks库的useUrlState，实现同步URL参数的功能。

这个hook能有效的解决页面刷新，数据丢失，表格查询参数被重置的问题，保证页面状态的持久性，提高页面的用户体验。

官方示例

下面是vue官网自定义hook的教程地址。 示例地址：cn.vuejs.org/guide/reusa…

qs

我们可以使用query-string这个库对url参数进行字符串转换或解析。

通过示例简单介绍下，这两个方法：

qs.parse(string, [options])

qs.parse('?name=jim')  // {name: 'jim'}
qs.parse('#token=123')  // {token: '123'}
qs.parse('name=jim&name=lily&age=22')  // {name: ['jim', 'lily'], age: 22}
qs.parse('foo=1&foo=2&foo=3');
//=> {foo: ['1', '2', '3']}

qs.stringify(object, [options])

qs.stringify({name: 'jim', age: 22});  // 'age=22&name=jim'
qs.stringify({name: ['jim', 'lily'], age: 22});  // 'age=22&name=jim&name=lily'
qs.stringify({foo: [1, 2, 3]});
//=> 'foo=1&foo=2&foo=3'

自定义Hook

Hook 主要功能是返回当前 URL 参数以及一个修改 URL 参数的方法，调用该修改方法时会同时改变 URL 参数和 URL 地址。

Hook 支持传入默认参数initialState

const [state, setState] = useUrlState({ name: zs });

import qs from "query-string";
import { onMounted, ref } from "vue";

export default function useUrlState(initialState = {}) {
  const state = ref({});
  return [
      state,
      (newValue) => {
        state.value = { ...state.value, ...newValue };
        update();
      },
    ];
}

解析url参数

初始化时，解析 URL 参数，合并初始化参数到state。

onMounted(() => {
  state.value = { ...initialState };
  if (location.search) {
    // 删除第一个？字符串;
    const searchString = location.search.slice(1);
    // 解析url参数
    const searchParse = qs.parse(searchString);
    state.value = { ...state.value, ...searchParse };
  }
});

更新state和url

使用 history.pushState 来更新浏览器的历史记录，并且改变 URL，避免页面的刷新和重新加载。

const update = () => {
  const queryString = qs.stringify(state.value);
  const newUrl = new URL(window.location.href);
  newUrl.search = queryString;
  history.pushState({}, "", newUrl.href);
};

实战

通过与表格联动，我们成功将 URL 参数同步到搜索表单，这样在页面刷新时，查询条件不会被重置。这一优化大大提升了用户体验！

完整代码

import qs from "query-string";
import { onMounted, ref } from "vue";

export default function useUrlState(initialState = {}) {
  const state = ref({});

  onMounted(() => {
    state.value = { ...initialState };
    if (location.search) {
      // 删除第一个？字符串;
      const searchString = location.search.slice(1);
      // 解析url参数
      const searchParse = qs.parse(searchString);
      state.value = { ...state.value, ...searchParse };
    }
    update();
  });

  // 更新url
  const update = () => {
    const queryString = qs.stringify(state.value);
    const newUrl = new URL(window.location.href);
    newUrl.search = queryString;
    history.pushState({}, "", newUrl.href);
  };

  return [
    state,
    (newValue) => {
      state.value = { ...state.value, ...newValue };
      update();
    },
  ];
}

总结

通过这个案例，我们实现了urlState，解决了页面刷新时查询条件重置的问题，提升了用户体验。希望本文对大家有所帮助。