目前我将参数保存到 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
参数?如果没有,有没有更好的方法可以避免硬编码查询参数名称?
提前致谢。
可以使用计算属性
name
语法来更改单个动态查询参数( ) :如果有许多此类参数影响应用程序状态,则可能表明设计存在问题。通常,全局状态不需要通过 url 传递,例如,它可以存储在全局存储中,并且可以持久保存在浏览器存储中。
如果意图不与特定客户端的浏览器绑定,而是能够通过链接提供状态,则仍可以使用全局状态来实现。无需显式提供查询参数,状态可以用作单一事实来源。
myState.param1 = 'abc'
并且可以与路由 URL 隐式同步。除了更新查询参数之外,尚不清楚它是否还有其他用途,但它们可以在观察器或路由器/钩子router.push
中更新,具体取决于它的工作方式。myState
beforeEach
beforeEnter