如何避免在 vue-router 中的查询中使用硬编码参数名称

Question

目前我将参数保存到 URL，如下所示：

  const save = async (parameter: LocationQuery) => {
    await router.push({ path: '', query: { ...route.query, ...parameter } });
  };

这样称呼：

save({ param1: 'abc' });

我还读取并监控这样的参数：

const route = useRoute();
const x = route.query.param1;
const y = computed(() => route.query.param1);

但是我在代码的各个功能/部分中有相当多的查询参数，因此将这些代码放在不同的地方并不理想。我想标准化使用，这样我就不会在各个地方使用硬编码的名称。

因此，如果我使用参数名称创建一个枚举：

export enum QueryParams {
  Param1 = 'param1',
  Param2 = 'param2'
  // ...
}

我可以用它来阅读和监控：

const route = useRoute();
const x = route.query[QueryParams.Param1 as string];
const y = computed(() => route.query[QueryParams.Param1 as string]);

但是我如何在保存中使用该名称？即：

const save = async (name: QueryParams, value: string | number | undefined) => {
    const parameter = // HOW to construct this parameter?
    await router.push({ path: '', query: { ...route.query, ...parameter } });
  };

这显然是错误的：

const parameter = { name: value }; // would creates 'name=' parameter instead of 'param1='

那么有没有办法使用枚举值来构造

LocationQuery

参数？ 如果没有，是否有更好的方法可以避免硬编码查询参数名称？

提前致谢。

Answer 1

单个动态查询参数（

name

）可以使用计算属性语法进行更改：

router.push({ path: '', query: { ...route.query, [name]: value } })

如果有很多此类参数影响应用程序状态，则可能表明设计存在问题。一般来说，全局状态不需要通过 url 传递，它可以存储在全局存储中，例如，并且可以持久化在浏览器存储中。

如果目的是不依赖于特定客户端的浏览器并能够通过链接提供状态，这仍然可以通过全局状态来实现。状态可以用作单一事实来源，而不是显式提供查询参数，

myState.param1 = 'abc'

。并且它可以与路由 url 隐式同步。目前尚不清楚

router.push

除了更新查询参数之外是否还有其他用途，但它们可以在

myState

观察者或路由器

beforeEach

/

beforeEnter

挂钩中更新，具体取决于其工作原理。