How to properly pass state data to VUE3 Composition API?

Question

Vue.js

I have a home page that has a Header component that has a button that calls a modal window, the modal window is a regular UI element with basic settings, to which I need to pass HTML with registration, for example, but I don’t quite understand how to do it correctly when this storing state without Vuex. At the moment it looks like this:

Homepage

controllers
  |__ModalsController.js // тут я планировала хранить состояние модального окна (открыто/закрыто/переключено)

ui
 |__ Heaader.vue //тут кнопка вызывающее конкретное модальное окно (например регистрацию) 
 |__ ModalBase.vue //базовая верстка модального окна 

pages
    |__Login.vue 	//верстка модального окна входа

But after reading the documentation several times, I did not figure out how to connect it all. I would be very grateful if someone tells me. Thanks in advance!

Answer 1

You can simply add a modal window component to the component where it should be called and implement all the necessary logic there and store the state of the modal in the same place where it is called

<template>
  <div class="home">
    <img 
      alt="Vue logo" 
      src="../assets/logo.png"
    >
    <Modal
      v-if="modalOpen"
    >
      <div 
        v-html="someData"
      ></div>
    </Modal>

    <button 
      @click="modalIsOpen = !modalIsOpen"
    >
      Переключатель модалки
    </button>
  </div>
</template>

<script>
import Modal from '@/components/Modal.vue'
import { ref } from 'vue';

export default {
  name: 'Home',

  components: {
    Modal,
  },

  setup() {
    const modalIsOpen = ref(true);
    const someData = 'some data...';

    return { modalIsOpen, someData };
  },
}
</script>