Лучшие практики с использованием композиционных устройств с несколькими параметрами, включая реактивность ⇐ Javascript

[Anonymous]

Я работаю над проектом VUE3, который в настоящее время имеет много кода, извлеченного в файлы TypeScript в качестве простых функций. Я понял, что эта структура кода со временем испаряется из -за его сложности и того факта, что вся бизнес -логика используется в основной части сценария файлов VUE. У меня есть ощущение, что содержание реакционной способности и обработки, передаваемых данными, является своего рода накладной, как я делаю это в настоящее время. Поэтому мне нужно обернуть свои свойства как ссылки (с функциями Getter). Только тогда я могу поддерживать реактивность. < /P>
const { cx, cy, r, size } = defineProps({
cx: Number,
cy: Number,
r: Number,
size: Number,
});

const sizeRef = toRef(() => size);
const cxRef = toRef(() => cx);
const cyRef = toRef(() => cy);
const rRef = toRef(() => r);

const {circleStyle} = useCircleStyle({ cxRef, cyRef, rRef });
< /code>
После прохождения значений я должен получить к ним доступ несколько раз (в этом примере только один раз, но я думаю, вы получаете мою идею на более широкой картине). Здесь я не могу «не принять», потому что реактивность теряется. У меня есть только выбор, чтобы всегда получить доступ к ним с помощью «xx.value» или написания вычисленного. < /P>
const useCircleStyle = ({cxRef, cyRef, rRef}: {
cxRef: Ref,
cyRef: Ref,
rRef: Ref,
}) => {

// TODO: if I use unref or extract value as const, the reactivity is lost
// --> can I extract the values directly to shorten the access and make the code more comprehensive?
const circleStyle = computed(() => {
return `
cx: ${cxRef.value}px;
cy: ${cyRef.value}px;
r: ${rRef.value}px;
`;
});

return {
circleStyle
}
}
< /code>
В документах Vue я нахожу только простые примеры с возвращающими значениями, но без сложных изменений. Вы знаете, есть ли здесь более простой способ достичь моей цели? У меня есть ощущение, что существует много накладных расходов, чтобы поддерживать всю реакционную способность, и что преобразование данных/реквизитов подвержен ошибкам. Есть некоторые комментарии Todo, которые указывают на мои проблемы.>

Подробнее здесь: https://stackoverflow.com/questions/795 ... reactivity