Можно ли передавать action, getters из Vuex в качестве Props?

Question

[Анастасия]

1 Компонент Overlay - предназначен для анимации появления модальных окон, принимает в качестве пропса геттер(активность окна) и экшен(что бы делать окно активным или неактивным) из Vuex. Так же принимает в себя SLOT модального окна

<template>
  <div
    class="overlay"
    v-if="isOpened"
    v-on:click="actionIsOpened"
  >
  </div>
  <div class="wrapper">
    <transition name="bounce">
    <slot
      v-if="isOpened"
      class="position"
    >
    </slot>
    </transition>
  </div>
</template>
<script>
export default {
  props: {
    isOpened: {
      type: Boolean,
      required: true
    },
    actionIsOpened: {
      type: Function,
      required: true
    }
  },
  name: 'OverlayDialog'
}
</script>

2 Компонент - родительский компонент, мы помещаем сюда overlatDialog и в слот само модальное окно, и передаем пропсы

<template>
  <OverlayDialog 
    v-bind:isOpened="isOpened"
    v-bind:actionIsOpened="changeIsOpened"
  >
    <div class="dialog">
      <div class="dialog__header">
        <div class="dialog__backward">
          Назад
        </div>
        <div class="dialog__title title-fz15">
          Создать новую коллекцию
        </div>
        <div class="dialog__create">
          Создать
        </div>
      </div>
      <div class="dialog__name-collection">
        Введите название
      </div>
      <div class="dialog__members">
        Участники
      </div>
    </div>
  </OverlayDialog>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters('dialogCreateCollection', ['isOpened']),
  },
  methods: {
    ...mapActions('dialogCreateCollection', ['changeIsOpened'])
  }
}
</script>

Это работает, но хотелось бы понять, это нормально так делать? Я просто недавно начала Vue практиковать и хотелось бы делать правильно, просто в каждое модальное окно прописывать анимацию это повторение кода, а подобный компонент мне позволит иметь переиспользуемую часть модального окна, где при нажатии на overlay модальное окно будет закрывать + готовую анимацию для всех модальных окон

Comments

[Вадим]

Правильно не существует.
Подходит вам, команде, проекту - используйте.

[Алекс Глебов]

При ssr это все отвалится. При передаче состояния с сервера на клиент остаются только данные, а не методы.

[Анастасия]

Алекс Глебов, а как тогда лучше реализовать?

[Алекс Глебов]

Нужен компонент модалки, где инкапсулированы все методы.
Посмотрите как в бутстрапе сделано, там для открытия дергается метод дочернего компонента из родителя. Или второй способ, через v-model. Люди в индустрии привыкли +- к такому внешнему интерфейсу модалки.
https://bootstrap-vue.org/docs/components/modal