0
# State Management
1

2
Pinia-based state management system providing centralized stores for workflow, UI, and application state management.
3

4
## Capabilities
5

6
### Workflows Store
7

8
Central store for workflow state and operations.
9

10
```typescript { .api }
11
interface WorkflowsStore {
12
  // State
13
  workflow: IWorkflowDb;
14
  workflowObject: Workflow;
15
  activeWorkflows: string[];
16
  workflowExecutionData: IExecutionResponse | null;
17
  nodeMetadata: NodeMetadataMap;
18
  
19
  // Getters
20
  workflowName: string;
21
  workflowId: string;
22
  allNodes: INodeUi[];
23
  isWorkflowRunning: boolean;
24
  nodesIssuesExist: boolean;
25
  
26
  // Actions
27
  setWorkflow(workflow: IWorkflowDb): void;
28
  addNode(node: INodeUi): void;
29
  removeNode(node: INodeUi): void;
30
  runWorkflow(data: IStartRunData): Promise<IExecutionPushResponse>;
31
}
32

33
function useWorkflowsStore(): WorkflowsStore;
34
```
35

36
### NDV Store
37

38
Node Details View state management.
39

40
```typescript { .api }
41
interface NDVStore {
42
  // State
43
  activeNodeName: string | null;
44
  input: InputPanel;
45
  output: OutputPanel;
46
  focusedMappableInput: string;
47
  draggable: Draggable;
48
  
49
  // Getters
50
  activeNode: INodeUi | null;
51
  ndvInputData: INodeExecutionData[];
52
  hasInputData: boolean;
53
  isNDVOpen: boolean;
54
  
55
  // Actions
56
  setActiveNodeName(nodeName: string, source?: string): void;
57
  unsetActiveNodeName(): void;
58
  setPanelDisplayMode(params: { panel: 'input' | 'output'; mode: IRunDataDisplayMode }): void;
59
  draggableStartDragging(params: DragStartParams): void;
60
}
61

62
function useNDVStore(): NDVStore;
63

64
interface InputPanel {
65
  nodeName?: string;
66
  run?: number;
67
  branch?: number;
68
  data: { isEmpty: boolean };
69
}
70

71
interface OutputPanel {
72
  run?: number;
73
  branch?: number;
74
  data: { isEmpty: boolean };
75
  editMode: { enabled: boolean; value: string };
76
}
77
```
78

79
### UI Store
80

81
General UI state management.
82

83
```typescript { .api }
84
interface UIStore {
85
  // State
86
  stateIsDirty: boolean;
87
  lastSelectedNode: string;
88
  modals: Record<string, ModalState>;
89
  sidebarMenuCollapsed: boolean;
90
  isPageLoading: boolean;
91
  
92
  // Getters
93
  isReadOnlyRoute: boolean;
94
  contextBasedTranslationKeys: string[];
95
  
96
  // Actions
97
  setStateIsDirty(isDirty: boolean): void;
98
  setLastSelectedNode(nodeName: string): void;
99
  openModal(key: string, data?: any): void;
100
  closeModal(key: string): void;
101
}
102

103
function useUIStore(): UIStore;
104

105
interface ModalState {
106
  open: boolean;
107
  mode?: string;
108
  data?: Record<string, unknown>;
109
  activeId?: string;
110
}
111
```
112

113
### Settings Store
114

115
Application settings and configuration.
116

117
```typescript { .api }
118
interface SettingsStore {
119
  // State
120
  settings: FrontendSettings;
121
  userManagement: IUserManagementSettings;
122
  templatesEndpointHealthy: boolean;
123
  
124
  // Getters
125
  isUserManagementEnabled: boolean;
126
  isLdapLoginEnabled: boolean;
127
  isSamlLoginEnabled: boolean;
128
  
129
  // Actions
130
  setSettings(settings: FrontendSettings): void;
131
  setUserManagementSettings(settings: IUserManagementSettings): void;
132
}
133

134
function useSettingsStore(): SettingsStore;
135
```
136

137
### Node Types Store
138

139
Node type definitions and metadata.
140

141
```typescript { .api }
142
interface NodeTypesStore {
143
  // State
144
  nodeTypes: NodeTypesByTypeNameAndVersion;
145
  
146
  // Getters
147
  allNodeTypes: INodeTypeDescription[];
148
  visibleNodeTypes: INodeTypeDescription[];
149
  
150
  // Actions
151
  setNodeTypes(nodeTypes: INodeTypeDescription[]): void;
152
  removeNodeTypes(nodeTypes: string[]): void;
153
}
154

155
function useNodeTypesStore(): NodeTypesStore;
156

157
interface NodeTypesByTypeNameAndVersion {
158
  [nodeType: string]: {
159
    [version: number]: INodeTypeDescription;
160
  };
161
}
162
```
163

164
### Credentials Store
165

166
Credential management state.
167

168
```typescript { .api }
169
interface CredentialsStore {
170
  // State
171
  credentialTypes: ICredentialTypeMap;
172
  credentials: ICredentialMap;
173
  
174
  // Getters
175
  allCredentials: ICredentialsResponse[];
176
  allCredentialTypes: ICredentialType[];
177
  
178
  // Actions
179
  setCredentials(credentials: ICredentialsResponse[]): void;
180
  setCredentialTypes(credentialTypes: ICredentialType[]): void;
181
  deleteCredential(id: string): void;
182
  updateCredential(credential: ICredentialsResponse): void;
183
}
184

185
function useCredentialsStore(): CredentialsStore;
186
```
187

188
### Users Store
189

190
User authentication and profile management.
191

192
```typescript { .api }
193
interface UsersStore {
194
  // State
195
  users: Record<string, IUser>;
196
  currentUser: IUser | null;
197
  personalizedNodeTypes: string[];
198
  
199
  // Getters
200
  allUsers: IUser[];
201
  currentUserCloudInfo: IUserCloudInfo | null;
202
  isDefaultUser: boolean;
203
  
204
  // Actions
205
  addUsers(users: IUser[]): void;
206
  deleteUser(userId: string): Promise<void>;
207
  updateUser(params: { id: string; data: Partial<IUser> }): Promise<void>;
208
  updateCurrentUser(data: Partial<IUser>): Promise<void>;
209
}
210

211
function useUsersStore(): UsersStore;
212
```
213

214
### Projects Store
215

216
Project and team management.
217

218
```typescript { .api }
219
interface ProjectsStore {
220
  // State
221
  projects: Record<string, Project>;
222
  currentProjectId: string | null;
223
  
224
  // Getters
225
  allProjects: Project[];
226
  currentProject: Project | null;
227
  personalProject: Project | null;
228
  
229
  // Actions
230
  setProjects(projects: Project[]): void;
231
  setCurrentProjectId(projectId: string): void;
232
  createProject(data: ProjectCreateRequest): Promise<Project>;
233
  updateProject(data: ProjectUpdateRequest): Promise<Project>;
234
}
235

236
function useProjectsStore(): ProjectsStore;
237
```
238

239
## Usage Examples
240

241
**Basic Store Usage:**
242

243
```typescript
244
import { useWorkflowsStore, useUIStore } from '@/stores';
245

246
const workflowsStore = useWorkflowsStore();
247
const uiStore = useUIStore();
248

249
// Access state
250
console.log(workflowsStore.workflowName);
251
console.log(uiStore.stateIsDirty);
252

253
// Use getters
254
if (workflowsStore.isWorkflowRunning) {
255
  console.log('Workflow is executing...');
256
}
257

258
// Call actions
259
workflowsStore.setWorkflow(newWorkflow);
260
uiStore.setStateIsDirty(true);
261
```
262

263
**Reactive Store Access:**
264

265
```typescript
266
import { computed } from 'vue';
267
import { useWorkflowsStore } from '@/stores/workflows.store';
268

269
const workflowsStore = useWorkflowsStore();
270

271
// Reactive computed values
272
const nodeCount = computed(() => workflowsStore.allNodes.length);
273
const hasUnsavedChanges = computed(() => workflowsStore.stateIsDirty);
274
const currentStatus = computed(() => {
275
  return workflowsStore.isWorkflowRunning ? 'Running' : 'Idle';
276
});
277
```
278

279
## Types
280

281
```typescript { .api }
282
interface IWorkflowDb {
283
  id: string;
284
  name: string;
285
  active: boolean;
286
  nodes: INodeUi[];
287
  connections: IConnections;
288
  settings?: IWorkflowSettings;
289
  tags?: ITag[];
290
  versionId: string;
291
}
292

293
interface FrontendSettings {
294
  isDocker: boolean;
295
  databaseType: 'sqlite' | 'mariadb' | 'postgresdb' | 'mysqldb';
296
  previewMode: boolean;
297
  endpointWebhook: string;
298
  endpointWebhookTest: string;
299
  saveDataErrorExecution: string;
300
  saveDataSuccessExecution: string;
301
  saveManualExecutions: boolean;
302
  timezone: string;
303
  executionTimeout: number;
304
  maxExecutionTimeout: number;
305
  workflowCallerPolicyDefaultOption: string;
306
  variables: {
307
    ui: boolean;
308
  };
309
  expressions: {
310
    evaluator: string;
311
  };
312
  publicApi: {
313
    enabled: boolean;
314
    latestVersion: number;
315
    path: string;
316
    swaggerUi: {
317
      enabled: boolean;
318
    };
319
  };
320
  workflowTagsDisabled: boolean;
321
  logLevel: string;
322
  hiringBannerEnabled: boolean;
323
  templates: {
324
    enabled: boolean;
325
    host: string;
326
  };
327
  onboardingCallPromptEnabled: boolean;
328
  executionMode: string;
329
  pushBackend: string;
330
  communityNodesEnabled: boolean;
331
  deployment: {
332
    type: string;
333
  };
334
  personalizationSurveyEnabled: boolean;
335
  defaultLocale: string;
336
  userManagement: {
337
    enabled: boolean;
338
    smtpSetup: boolean;
339
    authenticationMethod: string;
340
  };
341
  sso: {
342
    saml: {
343
      enabled: boolean;
344
      loginEnabled: boolean;
345
      loginLabel: string;
346
    };
347
    ldap: {
348
      enabled: boolean;
349
      loginEnabled: boolean;
350
      loginLabel: string;
351
    };
352
  };
353
  mfa: {
354
    enabled: boolean;
355
  };
356
  enterprise: Record<string, boolean>;
357
}
358

359
interface Draggable {
360
  isDragging: boolean;
361
  type: string;
362
  data: string;
363
  dimensions: DOMRect | null;
364
  activeTarget: { id: string; stickyPosition: null | XYPosition } | null;
365
}
366

367
type IRunDataDisplayMode = 'table' | 'json' | 'binary' | 'schema' | 'html' | 'ai';
368
```