timbre timbre's questions

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 LocationQueryparâmetro? Caso contrário, existe uma abordagem melhor que permita evitar nomes de parâmetros de consulta codificados?

Desde já, obrigado.

Os documentos do roteador Vue fornecem 2 padrões específicos de uso:

const route = useRoute();

// Get the current value
const id = route.params.id;

// Watch for further value changes
watch(
  () => route.params.id,
  (newValue, oldValue) => {
    console.log(`The value changed from ${oldValue} to ${newValue}`);
});

No entanto, em vários exemplos online, vejo que muitas vezes a rota é usada como uma computedpropriedade reativa:

const id = computed(() => route.params.id);

Eu me pergunto qual é a vantagem computedneste caso? Parece que isso não vai capturar alterações de valor e apenas complica demais a obtenção do valor. Ou estou faltando alguma coisa?

Estou tentando aplicar os Tailwind's dividenas divs criadas com v-foro Vue3:

<div v-for="(i) in [1, 2, 3]" class="divide-y divide-red-400">
  <div>{{ i }}</div>
</div>

Mas nenhum divisor é aplicado:

Espero ver isso:

(Observação: esta imagem foi criada com as mesmas divs pai class, mas sem v-forloop, apenas adicionando estaticamente divs filhos)

Então, existe alguma maneira de aplicar divisor aos itens em v-forloop? Qualquer alternativa que produza o mesmo efeito também serviria. Obrigado