Как мне реализовать открытие модального окна на Vue?

Question

[Дмитрий]

Это мой store на vuex с двумя флагами модальных окон:

export default {
    actions: {},
    mutations: {},
    state: {
        modalAuth: false,
        modalCart: false,
    },
    getters: {},
}

Это моя компонента App:

<template>
  <the-header></the-header>
  <restaurants></restaurants>
  <the-main :cards="allPartners"></the-main>
  <the-footer></the-footer>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import TheMain from '@/pages/TheMain/TheMain.vue'
import Restaurants from '@/pages/Restaurants/Restaurants.vue'
import TheHeader from './components/Header/Header.vue';
import TheFooter from './components/Footer/Footer.vue';

import ModalAuth from './components/ModalAuth/ModalAuth.vue';
import ModalCart from './components/ModalCart/ModalCart.vue';

import '@/assets/styles/normalize.scss'
import '@/assets/styles/global.scss'

export default {
  name: 'App',
  components: { TheMain, Restaurants, TheHeader, TheFooter, ModalAuth, ModalCart },
  
  computed: mapGetters(['allPartners']),
  methods: mapActions(['fetchPartners']),
  async mounted() {
    this.fetchPartners();
  }
}
</script>

Как я могу их переписать чтобы при клике на кнопки из компоненты менялся state и открывались модалки?

Answer 1

[Владимир Коротенко]

где то так после вешаете на модалки v-if и все

computed: {
    modalAuth () {
      return store.state.modalAuth
    },
    modalCart () {
      return store.state.modalCart
    },


  }