使用Link或Inertia.get()时如何保留查询字符串？

当前手动传递所有查询参数的方式不算最佳实践，代码冗余且维护成本高，这里有几种更简洁的实现方式：

1. 封装查询参数生成函数 #

把重复的参数收集逻辑抽成独立函数，每次调用Inertia.get()时直接复用，避免重复编写参数列表：

// 封装生成查询参数的函数
const getQueryParams = () => ({
  search: search.value,
  orderBy: orderByLocalRef.value,
  orderDirection: orderDirectionLocalRef.value
})

// 监听search变化
watch(search, (value) => {
  Inertia.get(props.dataUrl, getQueryParams(), {
    preserveState: true,
    replace: true
  })
})

// 表头排序点击事件
function orderByClicked(orderKey) {
  if (!orderKey) return

  if (orderByLocalRef.value === orderKey) {
    orderDirectionLocalRef.value = orderDirectionLocalRef.value === 'asc' ? 'desc' : 'asc'
  } else {
    orderDirectionLocalRef.value = 'asc'
  }
  orderByLocalRef.value = orderKey

  Inertia.get(props.dataUrl, getQueryParams(), {
    preserveState: true,
    replace: true
  })
}

2. 使用Inertia原生的preserveQuery选项（推荐） #

Inertia内置了preserveQuery选项，专门用于保留当前URL中的查询字符串，不需要手动传递所有参数，只需要传入变化的部分即可：

// 监听search变化，仅传递变化的search参数，其余参数自动保留
watch(search, (value) => {
  Inertia.get(props.dataUrl, { search: value }, {
    preserveState: true,
    replace: true,
    preserveQuery: true
  })
})

// 表头排序点击事件，仅传递排序相关参数，search参数自动保留
function orderByClicked(orderKey) {
  if (!orderKey) return

  if (orderByLocalRef.value === orderKey) {
    orderDirectionLocalRef.value = orderDirectionLocalRef.value === 'asc' ? 'desc' : 'asc'
  } else {
    orderDirectionLocalRef.value = 'asc'
  }
  orderByLocalRef.value = orderKey

  Inertia.get(props.dataUrl, { 
    orderBy: orderByLocalRef.value, 
    orderDirection: orderDirectionLocalRef.value 
  }, {
    preserveState: true,
    replace: true,
    preserveQuery: true
  })
}

这种方式完全利用Inertia的原生能力，代码最简洁，也无需维护所有参数的同步逻辑。

3. 统一封装列表请求函数 #

如果页面中有多个类似的列表操作，可以进一步封装通用请求函数，预设常用选项，进一步减少重复代码：

// 封装通用列表请求，预设常用配置
const fetchList = (params = {}) => {
  Inertia.get(props.dataUrl, params, {
    preserveState: true,
    replace: true,
    preserveQuery: true
  })
}

// 监听search变化
watch(search, (value) => {
  fetchList({ search: value })
})

// 表头排序点击事件
function orderByClicked(orderKey) {
  if (!orderKey) return

  if (orderByLocalRef.value === orderKey) {
    orderDirectionLocalRef.value = orderDirectionLocalRef.value === 'asc' ? 'desc' : 'asc'
  } else {
    orderDirectionLocalRef.value = 'asc'
  }
  orderByLocalRef.value = orderKey

  fetchList({ 
    orderBy: orderByLocalRef.value, 
    orderDirection: orderDirectionLocalRef.value 
  })
}

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