140500

FRONTEND/STORE/UI.TS.md

@@ -0,0 +1,50 @@
+**Импорт функции defineStore из библиотеки pinia для создания хранилища**:
+```
+import { defineStore } from 'pinia';
+```
+**Определение типа данных ConfirmationModalDataType**:
+```
+type ConfirmationModalDataType = {
+    text: string,
+    action: () => any
+};
+```
+Здесь определяется тип данных `ConfirmationModalDataType`, который содержит текст модального окна и функцию действия при подтверждении.
+
+**Определение типа состояния для хранилища ui**:
+```
+type uiState = {
+    confirmationModalStatus: boolean;
+    confirmationModalData: ConfirmationModalDataType | undefined;
+};
+```
+В этом блоке определяется тип состояния `uiState` для хранилища. `confirmationModalStatus` указывает на состояние модального окна (открыто или закрыто), а `confirmationModalData` содержит данные для модального окна подтверждения.
+
+**Начальное состояние хранилища**:
+```
+const defaultState: uiState = {
+    confirmationModalStatus: false,
+    confirmationModalData: undefined,
+};
+```
+Здесь устанавливается начальное состояние хранилища `uiStore`, в котором модальное окно подтверждения изначально закрыто и данные для него не определены.
+
+**Экспорт хранилища uiStore с использованием defineStore**:
+```
+export const uiStore = defineStore({
+    id: 'ui',
+    state: () => defaultState,
+    actions: {
+        openConfirmationModal(text: string, action: () => any) {
+            this.confirmationModalData = { text, action };
+            this.confirmationModalStatus = true;
+        },
+        closeConfirmationModal() {
+            this.confirmationModalData = undefined;
+            this.confirmationModalStatus = false;
+        },
+    },
+    persist: true,
+});
+```
+Здесь мы используем `defineStore` для создания хранилища `uiStore` с определенным состоянием (`state`), действиями (`actions`) для открытия и закрытия модального окна подтверждения, а также флагом `persist: true`, чтобы сохранять состояние хранилища между перезагрузками страницы.