Frontend архитектура MVP (Model-View-Presenter)

import { namespace } from 'vuex-class';
import { IVuexObservable, TFetchState } from '~/mvp/store';

export type TWidgetData = {
  id: string;
  title: string;
  description: string;
};

export enum EModal {
  NONE,
  WIDGET_CREATE
}

export type TModalData = Partial<TWidgetData>;

// ОБЯЗАТЕЛЬНО
// Конечное состояние конкретной бизнес логики, домейн
export type TState = TFetchState & {
  disabled: boolean;
  list: TWidgetData[];
  showedModal: EModal;
  dataModal: TModalData | null;
};

// ОБЯЗАТЕЛЬНО
// презентер, в нем вся логика, обращение к модели за данными, заполнение стора и оповещение вьюшки.
export interface IPresenter extends IVuexObservable {
  onCreate(): void;
  onCloseModal(): void;
  onOpenModal(type: EModal): void;
  onTogglePermissionCreate(): void;
  onCreateWidget(title: string, description: string): void;
}

// если есть сервис то и для сервиса описываем интерфейс

// ОБЯЗАТЕЛЬНО базовое состояние для вьюшки
export const initialState = (): TState => ({
  isLoading: true,
  isError: false,
  statusCode: 200,
  disabled: true,
  errorMessage: '',
  list: [],
  showedModal: EModal.NONE,
  dataModal: null
});

export enum EEvents {
  CREATE_WIDGET = 'mvp:main:createWidgetEvent'
}

import eventEmitter from '~/modules/eventbus/EventEmitter';

export default class Presenter
  extends VuexObservable<TState, MainVuexModule>
  implements IPresenter
{
  constructor(store: Store<TState>) {
    super(store, initialState(), STORE_NS);
  }

  onCreate(): void {
    setTimeout(() => {
      this.onChangeState({ isLoading: false });
      eventEmitter.emit<TNotification>('notification', {
        status: 'success',
        title: 'Уведомление',
        content: 'Модуль загружен',
        position: 'top'
      });
    }, 700);
  }

  onCloseModal(): void {
    this.onChangeState({ showedModal: EModal.NONE });
  }

  onOpenModal(type: EModal): void {
    this.onChangeState({ showedModal: type });
  }

  onTogglePermissionCreate(): void {
    this.onChangeState({ disabled: !this.state.disabled });
  }

  onCreateWidget(title: string, description: string): void {
    // тут допустим уходит запрос в сервис, возвращаются данные и сетим уже в стейт
    this.onChangeState({ title, description }, 'addWidget');
    // шлём в общую шину событий уведомление
    eventEmitter.emit(EEvents.CREATE_WIDGET, title);
  }
}

import { IService, TPost } from '~/demo/business/post/Domain';

export default class Service implements IService {
  async fetchListPosts(): Promise<TPost[]> {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    return await response.json();
  }
}

<template>
  <cds-grid>
    <cds-row align-v="stretch">
      <cds-col cols="16">
        <create-widget-button class="cds-mb-m" />
        <widget-list />
        <create-widget-modal v-if="state.showedModal === EModal.WIDGET_CREATE" />
      </cds-col>
    </cds-row>

    <cds-row>
      <cds-col cols="4">
        <menu-posts />
      </cds-col>
      <cds-col cols="12">
        <load-posts-button class="cds-mb-m" />
        <post-list />
      </cds-col>
    </cds-row>
  </cds-grid>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'nuxt-property-decorator';
import eventEmitter from '~/modules/eventbus/EventEmitter';
import { EModal, storeModule, TState } from '~/demo/business/main/Domain';
import { postStoreModule, TState as TPostState } from '~/demo/business/post/Domain';
import { TNotification } from '~/demo/@types';

import CreateWidgetButton from '~/demo/business/main/view/action/CreateWidgetButton.vue';
import LoadPostsButton from '~/demo/business/post/view/action/LoadPostsButton.vue';

const PostList = () => import('~/demo/business/post/view/PostList.vue');
const MenuPosts = () => import('~/demo/business/post/view/action/MenuPosts.vue');
const WidgetList = () => import('~/demo/business/main/view/WidgetList.vue');
const CreateWidgetModal = () => import('~/demo/business/main/view/modal/CreateWidgetModal.vue');

@Component({
  components: { PostList, LoadPostsButton, MenuPosts, WidgetList, CreateWidgetModal, CreateWidgetButton }
})
export default class DemoMediator extends Vue {
  EModal = EModal;
  // в медиаторе есть доступ ко всем состояниям модуля
  @storeModule.State('internalState') state: TState;
  @postStoreModule.State('internalState') postState: TPostState;

  // можно подписаться на любое состояние и вызывать презентер другого бизнеса и др.
  @Watch('postState.list')
  onLoadPosts() {
    eventEmitter.emit<TNotification>('notification', {
      status: 'success',
      title: 'Уведомление',
      content: 'Список постов загрузился'
    });
  }

  mounted() {
    // есть доступ ко всеми презентерам, в медиаторе происходит связь состояний, и постройка базовой логики
    this.$presenter.mainInstance.onCreate();
    this.$presenter.postInstance.onCreate();
  }
}
</script>

<template>
  <cds-button :disabled="state.disabled" @click="onClick">
    Создать виджет
  </cds-button>
</template>

<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator';
import { EModal, storeModule, TState } from '~/demo/business/main/Domain';

@Component
export default class CreateWidgetButton extends Vue {
  @storeModule.State('internalState') state: TState;

  onClick() {
    this.$presenter.mainInstance.onOpenModal(EModal.WIDGET_CREATE);
  }
}
</script>

import { Plugin } from '@nuxt/types';

import * as Main from '~/demo/business/main/Domain';
import * as Post from '~/demo/business/post/Domain';

import MainPresenter from '~/demo/business/main/Presenter';
import PostPresenter from '~/demo/business/post/Presenter';

export interface IPresenterPlugin {
  mainInstance: Main.IPresenter;
  postInstance: Post.IPresenter;
}

const presenter: Plugin = (context, inject) => {
  let presenterMainInstance: Main.IPresenter;
  let presenterPostInstance: Post.IPresenter;
  inject('presenter', {
    get mainInstance(): Main.IPresenter {
      if (presenterMainInstance) {
        return presenterMainInstance;
      }

      presenterMainInstance = new MainPresenter(context.store);
      return presenterMainInstance;
    },
    get postInstance(): Post.IPresenter {
      if (presenterPostInstance) {
        return presenterPostInstance;
      }

      presenterPostInstance = new PostPresenter(context.store);
      return presenterPostInstance;
    }
  });
};

import * as Main from '~/demo/business/main/Domain';
import * as Post from '~/demo/business/post/Domain';

import MainVuexModule from '~/demo/business/main/store/MainVuexModule';
import PostVuexModule from '~/demo/business/post/store/PostVuexModule';

export default ({ store }: Context) => {
  store.registerModule(
    Main.STORE_NS,
    MainVuexModule
  );
  store.registerModule(
    Post.STORE_NS,
    PostVuexModule
  );
};