Atualmente eu salvo um parâmetro em URL assim:
const save = async (parameter: LocationQuery) => {
await router.push({ path: '', query: { ...route.query, ...parameter } });
};
chamado assim:
save({ param1: 'abc' });
Eu também leio e monitoro os parâmetros como este:
const route = useRoute();
const x = route.query.param1;
const y = computed(() => route.query.param1);
Mas tenho alguns parâmetros de consulta em vários recursos/partes do código, portanto, ter esses pedaços de código em vários lugares não é o ideal. Gostaria de padronizar o uso, para não ter nomes codificados em vários lugares.
Então, se eu criar um enum com os nomes dos parâmetros:
export enum QueryParams {
Param1 = 'param1',
Param2 = 'param2'
// ...
}
Posso usá-lo para leitura e monitoramento:
const route = useRoute();
const x = route.query[QueryParams.Param1 as string];
const y = computed(() => route.query[QueryParams.Param1 as string]);
Mas como faço para usar o nome no save? Ou seja:
const save = async (name: QueryParams, value: string | number | undefined) => {
const parameter = // HOW to construct this parameter?
await router.push({ path: '', query: { ...route.query, ...parameter } });
};
Obviamente, isso está errado:
const parameter = { name: value }; // would creates 'name=' parameter instead of 'param1='
Então, existe uma maneira de usar um valor enum para construir um LocationQuery
parâmetro? Caso contrário, existe uma abordagem melhor que permita evitar nomes de parâmetros de consulta codificados?
Desde já, obrigado.
Um único parâmetro de consulta dinâmica (
name
) pode ser alterado com sintaxe de propriedade computada :Se houver muitos desses parâmetros que afetam o estado do aplicativo, isso poderá indicar um problema de design. Geralmente o estado global não precisa ser passado pelo URL, ele pode ser armazenado em um armazenamento global, por exemplo, e pode ser persistido no armazenamento do navegador.
Caso a intenção seja não estar vinculado ao navegador específico do cliente e poder fornecer um estado através de um link, isso ainda poderá ser alcançado com o estado global. Em vez de fornecer parâmetros de consulta explicitamente, o estado poderia ser usado como uma única fonte de verdade
myState.param1 = 'abc'
. E pode ser sincronizado implicitamente com o URL da rota. Não se sabe serouter.push
serve a algum propósito além de atualizar os parâmetros de consulta, mas eles podem ser atualizados nomyState
observador ou no roteadorbeforeEach
/beforeEnter
ganchos, dependendo de como isso deve funcionar.