Открываем и закрываем модалки на Vue Composition API

[Kulikoff_A]

посмотрите в сторону такого подхода https://vue-final-modal.org/

[yudeek]

Подход интересный, большое спасибо!

[Vadiok]

Какое-то мудреное решение, с которым также легко ошибиться, вписав в шаблоне ключ с ошибкой.
Проще и практичнее сделать так:

const useToggle = (proxy, callback) => {
  const setValue = (value) => {
    proxy.value = value;
    if (typeof callback === 'function') {
      callback(value);
    }
  };
  const open = () => setValue(true);
  const close = () => setValue(false);
  return { setValue, open, close };
};

const isOpenFirst = ref(false);
const isOpenSecond = ref(false);

const {
  open: openFirst,
} = useToggle(isOpenFirst);
const {
  open: openSecond,
} = useToggle(isOpenSecond);

[yudeek]

Интересное решение, но тут два раза вызывается функция useToggle в одном компоненте. Как минимум, никакие сайд эффекты (onMount, watch и т.д.) в нее уже не поместить без костылей. Также не совсем понятно, почему должна работать вот такая деструктуризация const { open: openFirst } = useToggle(isOpenFirst);

[Vadiok]

тут два раза вызывается функция useToggle в одном компоненте

Сколько модалок, столько и вызывается. Честно говоря, редко когда требуется в 1 компоненте делать больше 1 модалки.

не совсем понятно, почему должна работать вот такая деструктуризация

Встречный вопрос - почему не должна? Вместо 2 open мы получаем методы openFirst и openSecond соответственно.

никакие сайд эффекты (onMount, watch и т.д.) в нее уже не поместить без костылей

watch: isOpenFirst / isOpenSecond у вас в области видимости, смотрите за ними. Насчет onMount - совершенно не понимаю, каким образом может понадобиться связывать это событие и открытие/закрытие модалки, может приведете пример.

[yudeek]

Встречный вопрос - почему не должна?

Уточню, вот такое тоже не будет вызывать ошибок const { open } = useToggle(isOpenFirst). Чисто на мой взгляд, исходная деструктуризация неявная, также есть риск ошибки. Но идея в целом мне нравится.

может приведете пример

Вам надо на закрытие всех модалок отправлять статистику и вы используете watch внутри useToggle.
 

[Vadiok]

Уточню, вот такое тоже не будет вызывать ошибок const { open } = useToggle(isOpenFirst).

Может я не совсем понимаю смысл вашего комментария. Когда у нас одна модалка в компоненте, пользуемся const { open } = useToggle(isOpen); и пользуемся open(); когда несколько - const { open: openFirst } = useToggle(isOpenFirst); и пользуемся openFirst().

Вам надо на закрытие всех модалок отправлять статистику и вы используете watch внутри useToggle.

Тут вообще watch не требуется:

useToggle(isOpen, (value) => {
  if (!value) {
    log('...');
  }
});

[mSnus]

По коду - типичный Реакт. Интересно, в какой момент они станут вообще взаимозаменяемы?

[yudeek]

Сейчас синтаксис почти у всех React-подобный (Solid, Qwik, Vue composition API). Но движки то фреймворков разные, наверное, без костылей не взаимозаменить.

[Amantura]

Посмотрите на defineExpose в composition API

Пример Modal component

const visible = false

const open = () => visible.value = true

const close = () => visible.value = false

defineExpose({ open, close })

Parent Component

<ModalComponent ref="modal" />

const modal = ref(null)

function openModal() { modal.value.open()}

Типа вы можете функции дочерного компонента из родительского