Как правильно переключаться между компонентами в Nuxt.JS?

Question

[thisall]

У меня есть страница

<template>
  <section class="grid">
    <div class="grid__containers">
      <div class="grid__aside grid__aside_min">
        <Staff />
      </div>
      <div class="grid__content grid__content_min">
        <MapStaff v-if="mapWindow" />
        <AddStaff v-if="addWindow" />
        <EditStaff v-if="editWindow" />
      </div>
    </div>
  </section>
</template>

<script>
//Extensions
import Button from '@/components/atoms/button'
import Icon from '@/components/atoms/icon'

//Store
import { mapGetters } from 'vuex'

export default {
  layout: 'default',
  head: () => ({
    title: 'Yelm | Доставка'
  }),
  components: {
    'v-button': Button,
    'v-icon': Icon,
    Staff: () => import('~/components/molecules/staff/staff'),
    MapStaff: () => import('~/components/molecules/staff/body/mapStaff'),
    AddStaff: () => import('~/components/molecules/staff/body/addStaff'),
    EditStaff: () => import('~/components/molecules/staff/body/editStaff'),
  },
  computed: {
    ...mapGetters({
      mapWindow: 'staff/getMapWindow',
      addWindow: 'staff/getAddWindow',
      editWindow: 'staff/getEditWindow',
    })
  }
}
</script>

И вот есть store для управлением состоянием компонентов

export const state = () => ({
  staff: [],
  mapWindow: true,
  addWindow: false,
  editWindow: false,
})

export const getters = {
  getStaff: (state) => {
    return state.staff
  },
  getMapWindow: (state) => {
    return state.mapWindow
  },
  getAddWindow: (state) => {
    return state.addWindow
  },
  getEditWindow: (state) => {
    return state.editWindow
  }
}

export const mutations = {
  setStaff(state, response) {
    state.staff = response
  },
  setMapWindow: (state) => {
    state.mapWindow = !state.mapWindow;
    state.addWindow = !state.addWindow;
    state.editWindow = !state.editWindow;
  },
  setAddWindow: (state) => {
    state.addWindow = !state.addWindow;
    state.mapWindow = !state.mapWindow;
  },
  setEditWindow: (state) => {
    state.editWindow = !state.editWindow;
    state.mapWindow = !state.mapWindow;
  }
}

Есть какой-нибудь более лаконичный способ переключаться между компонентами ?

Answer 1

[Константин Величко]

Есть например роутер. Если вы пытаетесь сделать модальные окна на базе vuex то посмотрите на код vuex-modal
Если кратко то сделайте стек из модалок и показывайте только одну верхнюю.
Можно пойти дальше и сделать хост компонент где либо в лейауте и отрисовывать компонент модалки динамически.
Если вам нужно всегда показывать толко одну модалку то просто переписывайте ее в сторе