Почему не работает реактивность VUE3 CompositionAPI?

Question

[Nina Fineberg]

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

ModalsController.js:

import { ref } from 'vue';
export const useModal = (init = false)=>{
  const isShowModal = ref(init);
  const openModal = () => {
    isShowModal.value = true;
  };
  
  const closeModal = () => {
    isShowModal.value = false;
  };
  return {
    isShowModal, openModal, closeModal
  }
}

Header.vue:

<template>
    
  <button @click="openModal">OpenModal</button>
 {{isShowModal}} 
    <button @click="closeModal">CloseModal</button>
</template>

<script setup>

import {useModal} from "./ModalsController.js";
const { isShowModal,openModal,closeModal } = useModal();
  
  

</script>

Modal.vue:

<template>
 
  <div v-if="isShowModal"> Modal window </div>
  
</template>

<script setup>
 import {useModal} from "./ModalsController.js";
const {isShowModal} = useModal();

</script>

Причем все работает если я создаю вместо функции простую переменную вот так:
ModalsController.js:

import { ref } from 'vue';
export const isShowModal = ref(false);

и соответственно меняю ее в хедере. Но это очень не удобно, т.к. есть еще много функций (переключение и.т.п.)
Заранее всем спасибо за помощь, вот тут я выложила в Playground для теста:
Не рабочий вариант
Рабочий вариант

Answer 1

[GrayHorse]

Во-первых, код можно было бы и отформатировать как-нибудь: первый вариант, второй.

Не работает, потому что для каждого компонента при вывозе useModal() создаются свои личные isShowModal, openModal, closeModal переменные.

Если не пытаться сделать из Vue подобие React Hooks, то вот: рабочий вариант.
(Из расчета, что компонент будет в одном экземпляре.)

Формальности ради: если компонент планируется использовать больше одного раза, то modal-state.js нужно оформить в виде класса, и передавать экземпляр* этого класса компоненту в виде пропса.
Сейчас же modal-state.jsпо сути синглтон.
*Который все равно нужно будет хранить где-то (в каком-то js файле), если планируется доступ из нескольких компонентов.

Comments

[Nina Fineberg]

ОГРОМНОЕ Спасибо! Очень понятно написали! и отдельное спасибо за рабочий пример! Один маленький вопрос, если передавать экземпляр класса в виде пропсов, мне же это можно будет сделать только от родителя к детям, судя по документации? A у меня больше 30 компонентов из которых можно вызвать модальное окно

[GrayHorse]

Суть в том, что состояние компонента (вместе с методами изменения этого состояния) хранится отдельно.
Это состояние передается в компонент в том же месте, где этот компонент и поместили в шаблоне.
Все компоненты работают с этим глобальным состоянием.

(Это как обычно делается при рендеренге нескольких одних и тех же компонент в v-for — основное состояние передается в виде пропса.)

Короче: демо.
Два "экземпляра" компонента Modal. "Main" и "Second".
Без использования класса, для простоты.

С использованием класса, пожалуй, будет менее удобно, т.к. надо не забывать о контексте (this) при вызове его методов: демо.