Это мой 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 и открывались модалки?