Files
we_pro_dock/FRONTEND/STORE/UI.TS.md
2024-05-14 11:39:33 +03:00

50 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
**Импорт функции 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`, чтобы сохранять состояние хранилища между перезагрузками страницы.