refactor(editor): Finish pinia migration, remove all vuex dependancies (#4533)

* ✨ Added pinia support. Migrated community nodes module.
* ✨ Added ui pinia store, moved some data from root store to it, updated modals to work with pinia stores
* ✨ Added ui pinia store and migrated a part of the root store
* ✨ Migrated `settings` store to pinia
* ✨ Removing vuex store refs from router
* ✨ Migrated `users` module to pinia store
* ⚡ Fixing errors after sync with master
* ⚡ One more error after merge
* ⚡ Created `workflows` pinia store. Moved large part of root store to it. Started updating references.
* ✨ Finished migrating workflows store to pinia
* ⚡ Renaming some getters and actions to make more sense
* ✨ Finished migrating the root store to pinia
* ✨ Migrated ndv store to pinia
* ⚡ Renaming main panel dimensions getter so it doesn't clash with data prop name
* ✔️ Fixing lint errors
* ✨ Migrated `templates` store to pinia
* ✨ Migrated the `nodeTypes`store
* ⚡ Removed unused pieces of code and oold vuex modules
* ✨ Adding vuex calls to pinia store, fixing wrong references
* 💄 Removing leftover $store refs
* ⚡ Added legacy getters and mutations to store to support webhooks
* ⚡ Added missing front-end hooks, updated vuex state subscriptions to pinia
* ✔️ Fixing linting errors
* ⚡ Removing vue composition api plugin
* ⚡ Fixing main sidebar state when loading node view
* 🐛 Fixing an error when activating workflows
* 🐛 Fixing isses with workflow settings and executions auto-refresh
* 🐛 Removing duplicate listeners which cause import error
* 🐛 Fixing route authentication
* ⚡ Updating freshly pulled $store refs
* ⚡ Adding deleted const
* ⚡ Updating store references in ee features. Reseting NodeView credentials update flag when resetting workspace
* ⚡ Adding return type to email submission modal
* ⚡ Making NodeView only react to paste event when active
* 🐛 Fixing signup view errors
* ✨ Started migrating the `credentials` module to pinia
* 👌 Addressing PR review comments
* ✨ Migrated permissions module to pinia
* ✨ Migrated `nodeCreator`, `tags` and `versions` modules to pinia
* ✨ Implemented webhooks pinia store
* ⚡ Removing all leftover vuex files and references
* ✨ Removing final vuex refs
* ⚡ Updating expected credentialId type
* ⚡ Removing node credentials subscription code, reducing node click debounce timeout
* 🐛 Fixing pushing nodes downstream when inserting new node
* ✔️ Fixing a lint error in new type guard
* ⚡ Updating helper reference
* ✔️ Removing unnecessary awaits
* ⚡ fix(editor): remove unnecessary imports from NDV
* ⚡ Merging mapStores blocks in NodeView
* ⚡ fix(editor): make sure JS Plumb not loaded earlier than needed
* ⚡ Updating type guard nad credentials subscriptions
* ⚡ Updating type guard so it doesn't use `any` type

Co-authored-by: Csaba Tuncsik <csaba@n8n.io>

packages/editor-ui/src/components/CredentialCard.vue

@@ -50,6 +50,7 @@ import dateformat from "dateformat";
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
+import { useCredentialsStore } from '@/stores/credentials';
 
 export const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
@@ -89,19 +90,24 @@ export default mixins(
 	},
 	computed: {
 		...mapStores(
+			useCredentialsStore,
 			useUIStore,
 			useUsersStore,
 		),
-		currentUser (): IUser {
-			return this.usersStore.currentUser || {} as IUser;
+		currentUser (): IUser | null {
+			return this.usersStore.currentUser;
 		},
 		credentialType(): ICredentialType {
-			return this.$store.getters['credentials/getCredentialTypeByName'](this.data.type);
+			return this.credentialsStore.getCredentialTypeByName(this.data.type);
 		},
-		credentialPermissions(): IPermissions {
-			return getCredentialPermissions(this.currentUser, this.data, this.$store);
+		credentialPermissions(): IPermissions | null {
+			return !this.currentUser ? null : getCredentialPermissions(this.currentUser, this.data);
 		},
 		actions(): Array<{ label: string; value: string; }> {
+			if (!this.credentialPermissions) {
+				return [];
+			}
+
 			return [
 				{
 					label: this.$locale.baseText('credentials.item.open'),
@@ -136,9 +142,7 @@ export default mixins(
 				);
 
 				if (deleteConfirmed) {
-					await this.$store.dispatch('credentials/deleteCredential', {
-						id: this.data.id,
-					});
+					this.credentialsStore.deleteCredential({ id:  this.data.id });
 				}
 			}
 		},

packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue

@@ -107,6 +107,7 @@ import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
+import { useCredentialsStore } from '@/stores/credentials';
 
 export default mixins(restApi).extend({
 	name: 'CredentialConfig',
@@ -182,6 +183,7 @@ export default mixins(restApi).extend({
 	},
 	computed: {
 		...mapStores(
+			useCredentialsStore,
 			useNDVStore,
 			useRootStore,
 			useUIStore,
@@ -202,7 +204,7 @@ export default mixins(restApi).extend({
 			return (this.credentialType as ICredentialType).name;
 		},
 		credentialOwnerName(): string {
-			return this.$store.getters['credentials/getCredentialOwnerName'](this.credentialId);
+			return this.credentialsStore.getCredentialOwnerName(this.credentialId);
 		},
 		documentationUrl(): string {
 			const type = this.credentialType as ICredentialType;

packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue

@@ -106,7 +106,6 @@
 import Vue from 'vue';
 
 import {
-	ICredentialsDecryptedResponse,
 	ICredentialsResponse,
 	IFakeDoor,
 	IUser,
@@ -150,6 +149,8 @@ import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
+import { useCredentialsStore } from '@/stores/credentials';
+import { isValidCredentialResponse } from '@/typeGuards';
 
 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
@@ -184,7 +185,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		return {
 			activeTab: 'connection',
 			authError: '',
-			credentialId: '' as string | number,
+			credentialId: '',
 			credentialName: '',
 			credentialData: {} as ICredentialDataDecryptedObject,
 			modalBus: new Vue(),
@@ -214,18 +215,17 @@ export default mixins(showMessage, nodeHelpers).extend({
 			{},
 		);
 
-		if (this.mode === 'new') {
-			this.credentialName = await this.$store.dispatch(
-				'credentials/getNewCredentialName',
-				{ credentialTypeName: this.credentialTypeName },
-			);
+		if (this.mode === 'new' && this.credentialTypeName) {
+			this.credentialName = await this.credentialsStore.getNewCredentialName({ credentialTypeName: this.credentialTypeName });
 
-			Vue.set(this.credentialData, 'ownedBy', {
-				id: this.currentUser.id,
-				firstName: this.currentUser.firstName,
-				lastName: this.currentUser.lastName,
-				email: this.currentUser.email,
-			});
+			if (this.currentUser) {
+				Vue.set(this.credentialData, 'ownedBy', {
+					id: this.currentUser.id,
+					firstName: this.currentUser.firstName,
+					lastName: this.currentUser.lastName,
+					email: this.currentUser.email,
+				});
+			}
 		} else {
 			await this.loadCurrentCredential();
 		}
@@ -259,23 +259,22 @@ export default mixins(showMessage, nodeHelpers).extend({
 	},
 	computed: {
 		...mapStores(
+				useCredentialsStore,
 				useNDVStore,
 				useSettingsStore,
 				useUIStore,
 				useUsersStore,
 				useWorkflowsStore,
 			),
-		currentUser(): IUser {
-			return this.usersStore.currentUser || {} as IUser;
+		currentUser(): IUser | null {
+			return this.usersStore.currentUser;
 		},
 		currentCredential(): ICredentialsResponse | null {
 			if (!this.credentialId) {
 				return null;
 			}
 
-			return this.$store.getters['credentials/getCredentialById'](
-				this.credentialId,
-			);
+			return this.credentialsStore.getCredentialById(this.credentialId);
 		},
 		credentialTypeName(): string | null {
 			if (this.mode === 'edit') {
@@ -293,9 +292,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return null;
 			}
 
-			const type = this.$store.getters['credentials/getCredentialTypeByName'](
-				this.credentialTypeName,
-			);
+			const type = this.credentialsStore.getCredentialTypeByName(this.credentialTypeName);
 
 			if (!type) {
 				return null;
@@ -333,9 +330,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		},
 		nodesWithAccess(): INodeTypeDescription[] {
 			if (this.credentialTypeName) {
-				return this.$store.getters['credentials/getNodesWithAccess'](
-					this.credentialTypeName,
-				);
+				return this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
 			}
 
 			return [];
@@ -408,7 +403,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				return {};
 			}
 
-			return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse, this.$store);
+			return getCredentialPermissions(this.currentUser, (this.credentialId ? this.currentCredential : this.credentialData) as ICredentialsResponse);
 		},
 		sidebarItems(): IMenuItem[] {
 				const items: IMenuItem[] = [
@@ -502,8 +497,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			);
 		},
 		getCredentialProperties(name: string): INodeProperties[] {
-			const credentialTypeData =
-				this.$store.getters['credentials/getCredentialTypeByName'](name);
+			const credentialTypeData = this.credentialsStore.getCredentialTypeByName(name);
 
 			if (!credentialTypeData) {
 				return [];
@@ -536,9 +530,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.credentialId = this.activeId;
 
 			try {
-				const currentCredentials: ICredentialsDecryptedResponse = await this.$store.dispatch('credentials/getCredentialData', {
-					id: this.credentialId,
-				});
+				const currentCredentials = await this.credentialsStore.getCredentialData({ id: this.credentialId });
 
 				if (!currentCredentials) {
 					throw new Error(
@@ -622,8 +614,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		},
 
 		getParentTypes(name: string): string[] {
-			const credentialType =
-				this.$store.getters['credentials/getCredentialTypeByName'](name);
+			const credentialType = this.credentialsStore.getCredentialTypeByName(name);
 
 			if (
 				credentialType === undefined ||
@@ -691,7 +682,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		},
 
 		async testCredential(credentialDetails: ICredentialsDecrypted) {
-			const result: INodeCredentialTestResult = await this.$store.dispatch('credentials/testCredential', credentialDetails);
+			const result = await this.credentialsStore.testCredential(credentialDetails);
 			if (result.status === 'Error') {
 				this.authError = result.message;
 				this.testedSuccessfully = false;
@@ -812,10 +803,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			let credential;
 
 			try {
-				credential = (await this.$store.dispatch(
-					'credentials/createNewCredential',
-					credentialDetails,
-				)) as ICredentialsResponse;
+				credential = await this.credentialsStore.createNewCredential(credentialDetails);
 				this.hasUnsavedChanges = false;
 			} catch (error) {
 				this.$showError(
@@ -846,10 +834,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 		): Promise<ICredentialsResponse | null> {
 			let credential;
 			try {
-				credential = (await this.$store.dispatch(
-					'credentials/updateCredential',
-					{ id: this.credentialId, data: credentialDetails },
-				)) as ICredentialsResponse;
+				credential = await this.credentialsStore.updateCredential({ id: this.credentialId, data: credentialDetails });
 				this.hasUnsavedChanges = false;
 			} catch (error) {
 				this.$showError(
@@ -893,9 +878,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 
 			try {
 				this.isDeleting = true;
-				await this.$store.dispatch('credentials/deleteCredential', {
-					id: this.credentialId,
-				});
+				this.credentialsStore.deleteCredential({ id: this.credentialId });
 				this.hasUnsavedChanges = false;
 			} catch (error) {
 				this.$showError(
@@ -929,22 +912,21 @@ export default mixins(showMessage, nodeHelpers).extend({
 			const types = this.parentTypes;
 
 			try {
+				const credData = { id: credential.id, ...this.credentialData };
 				if (
 					this.credentialTypeName === 'oAuth2Api' ||
 					types.includes('oAuth2Api')
 				) {
-					url = (await this.$store.dispatch('credentials/oAuth2Authorize', {
-						...this.credentialData,
-						id: credential.id,
-					})) as string;
+					if (isValidCredentialResponse(credData)) {
+						url = await this.credentialsStore.oAuth2Authorize(credData);
+					}
 				} else if (
 					this.credentialTypeName === 'oAuth1Api' ||
 					types.includes('oAuth1Api')
 				) {
-					url = (await this.$store.dispatch('credentials/oAuth1Authorize', {
-						...this.credentialData,
-						id: credential.id,
-					})) as string;
+					if (isValidCredentialResponse(credData)) {
+						url = await this.credentialsStore.oAuth1Authorize(credData);
+					}
 				}
 			} catch (error) {
 				this.$showError(
@@ -971,7 +953,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 					// Set some kind of data that status changes.
 					// As data does not get displayed directly it does not matter what data.
 					Vue.set(this.credentialData, 'oauthTokenData', {});
-					this.$store.commit('credentials/enableOAuthCredential', credential);
+					this.credentialsStore.enableOAuthCredential(credential);
 
 					// Close the window
 					if (oauthPopup) {

packages/editor-ui/src/components/CredentialEdit/CredentialSharing.ee.vue

@@ -39,6 +39,7 @@ import mixins from "vue-typed-mixins";
 import {showMessage} from "@/components/mixins/showMessage";
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users';
+import { useCredentialsStore } from "@/stores/credentials";
 
 export default mixins(
 	showMessage,
@@ -46,7 +47,10 @@ export default mixins(
 	name: 'CredentialSharing',
 	props: ['credential', 'credentialId', 'credentialData', 'sharedWith', 'credentialPermissions'],
 	computed: {
-		...mapStores(useUsersStore),
+		...mapStores(
+			useCredentialsStore,
+			useUsersStore,
+		),
 		usersList(): IUser[] {
 			return this.usersStore.allUsers.filter((user: IUser) => {
 				const isCurrentUser = user.id === this.usersStore.currentUser?.id;
@@ -64,7 +68,7 @@ export default mixins(
 			].concat(this.credentialData.sharedWith || []);
 		},
 		credentialOwnerName(): string {
-			return this.$store.getters['credentials/getCredentialOwnerName'](this.credentialId);
+			return this.credentialsStore.getCredentialOwnerName(this.credentialId);
 		},
 	},
 	methods: {

packages/editor-ui/src/components/CredentialIcon.vue

@@ -7,6 +7,7 @@
 </template>
 
 <script lang="ts">
+import { useCredentialsStore } from '@/stores/credentials';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
@@ -21,6 +22,7 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapStores(
+			useCredentialsStore,
 			useNodeTypesStore,
 			useRootStore,
 		),
@@ -42,8 +44,7 @@ export default Vue.extend({
 				const nodeType = this.credentialWithIcon.icon.replace('node:', '');
 				return this.nodeTypesStore.getNodeType(nodeType);
 			}
-
-			const nodesWithAccess = this.$store.getters['credentials/getNodesWithAccess'](this.credentialTypeName);
+			const nodesWithAccess = this.credentialsStore.getNodesWithAccess(this.credentialTypeName);
 
 			if (nodesWithAccess.length) {
 				return nodesWithAccess[0];
@@ -53,8 +54,12 @@ export default Vue.extend({
 		},
 	},
 	methods: {
-		getCredentialWithIcon(name: string): ICredentialType | null {
-			const type = this.$store.getters['credentials/getCredentialTypeByName'](name);
+		getCredentialWithIcon(name: string | null): ICredentialType | null {
+			if (!name) {
+				return null;
+			}
+
+			const type = this.credentialsStore.getCredentialTypeByName(name);
 
 			if (!type) {
 				return null;
@@ -65,9 +70,12 @@ export default Vue.extend({
 			}
 
 			if (type.extends) {
-				return type.extends.reduce((accu: string | null, type: string) => {
-					return accu || this.getCredentialWithIcon(type);
-				}, null);
+				let parentCred = null;
+				type.extends.forEach(name => {
+					parentCred = this.getCredentialWithIcon(name);
+					if (parentCred !== null) return;
+				});
+				return parentCred;
 			}
 
 			return null;

packages/editor-ui/src/components/CredentialsSelect.vue

@@ -53,9 +53,10 @@
 <script lang="ts">
 import { ICredentialType } from 'n8n-workflow';
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
 import ScopesNotice from '@/components/ScopesNotice.vue';
 import NodeCredentials from '@/components/NodeCredentials.vue';
+import { mapStores } from 'pinia';
+import { useCredentialsStore } from '@/stores/credentials';
 
 export default Vue.extend({
 	name: 'CredentialsSelect',
@@ -73,11 +74,16 @@ export default Vue.extend({
 		'displayTitle',
 	],
 	computed: {
-		...mapGetters('credentials', ['allCredentialTypes', 'getScopesByCredentialType']),
+		...mapStores(
+			useCredentialsStore,
+		),
+		allCredentialTypes(): ICredentialType[] {
+			return this.credentialsStore.allCredentialTypes;
+		},
 		scopes(): string[] {
 			if (!this.activeCredentialType) return [];
 
-			return this.getScopesByCredentialType(this.activeCredentialType);
+			return this.credentialsStore.getScopesByCredentialType(this.activeCredentialType);
 		},
 		supportedCredentialTypes(): ICredentialType[] {
 			return this.allCredentialTypes.filter((c: ICredentialType) => this.isSupported(c.name));
@@ -97,10 +103,10 @@ export default Vue.extend({
 		isSupported(name: string): boolean {
 			const supported = this.getSupportedSets(this.parameter.credentialTypes);
 
-			const checkedCredType = this.$store.getters['credentials/getCredentialTypeByName'](name);
+			const checkedCredType = this.credentialsStore.getCredentialTypeByName(name);
 
 			for (const property of supported.has) {
-				if (checkedCredType[property] !== undefined) {
+				if (checkedCredType[property as keyof ICredentialType] !== undefined) {
 
 					// edge case: `httpHeaderAuth` has `authenticate` auth but belongs to generic auth
 					if (name === 'httpHeaderAuth' && property === 'authenticate') continue;

packages/editor-ui/src/components/CredentialsSelectModal.vue

@@ -25,7 +25,7 @@
 				>
 					<font-awesome-icon icon="search" slot="prefix" />
 					<n8n-option
-						v-for="credential in allCredentialTypes"
+						v-for="credential in credentialsStore.allCredentialTypes"
 						:value="credential.name"
 						:key="credential.name"
 						:label="credential.displayName"
@@ -50,7 +50,6 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { mapGetters } from "vuex";
 import mixins from 'vue-typed-mixins';
 
 import Modal from './Modal.vue';
@@ -59,6 +58,7 @@ import { externalHooks } from '@/components/mixins/externalHooks';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
+import { useCredentialsStore } from '@/stores/credentials';
 
 export default mixins(externalHooks).extend({
 	name: 'CredentialsSelectModal',
@@ -67,7 +67,7 @@ export default mixins(externalHooks).extend({
 	},
 	async mounted() {
 		try {
-			await this.$store.dispatch('credentials/fetchCredentialTypes');
+			await this.credentialsStore.fetchCredentialTypes(false);
 		} catch (e) {
 		}
 		this.loading = false;
@@ -89,10 +89,10 @@ export default mixins(externalHooks).extend({
 	},
 	computed: {
 		...mapStores(
+			useCredentialsStore,
 			useUIStore,
 			useWorkflowsStore,
 		),
-		...mapGetters('credentials', ['allCredentialTypes']),
 	},
 	methods: {
 		onSelect(type: string) {

packages/editor-ui/src/components/ExecutionsView/ExecutionsView.vue

@@ -42,6 +42,7 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useTagsStore } from '@/stores/tags';
 
 export default mixins(restApi, showMessage, executionHelpers, debounceHelper, workflowHelpers).extend({
 	name: 'executions-page',
@@ -57,6 +58,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 	},
 	computed: {
 		...mapStores(
+			useTagsStore,
 			useNodeTypesStore,
 			useSettingsStore,
 			useUIStore,
@@ -374,7 +376,7 @@ export default mixins(restApi, showMessage, executionHelpers, debounceHelper, wo
 				this.workflowsStore.setWorkflowTagIds(tagIds || []);
 				this.workflowsStore.setWorkflowHash(data.hash);
 
-				this.$store.commit('tags/upsertTags', tags);
+				this.tagsStore.upsertTags(tags);
 
 				this.$externalHooks().run('workflow.open', { workflowId, workflowName: data.name });
 				this.uiStore.stateIsDirty = false;

packages/editor-ui/src/components/InviteUsersModal.vue

@@ -31,7 +31,7 @@ import Modal from "./Modal.vue";
 import Vue from "vue";
 import { IFormInputs, IInviteResponse } from "@/Interface";
 import { VALID_EMAIL_REGEX, INVITE_USER_MODAL_KEY } from "@/constants";
-import { ROLE } from "@/modules/userHelpers";
+import { ROLE } from "@/stores/userHelpers";
 import { mapStores } from "pinia";
 import { useUsersStore } from "@/stores/users";
 

packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue

@@ -82,7 +82,6 @@
 <script lang="ts">
 import Vue from "vue";
 import mixins from "vue-typed-mixins";
-import { mapGetters } from "vuex";
 import {
 	DUPLICATE_MODAL_KEY,
 	MAX_WORKFLOW_NAME_LENGTH,
@@ -110,6 +109,7 @@ import { useUIStore } from "@/stores/ui";
 import { useSettingsStore } from "@/stores/settings";
 import { useWorkflowsStore } from "@/stores/workflows";
 import { useRootStore } from "@/stores/n8nRootStore";
+import { useTagsStore } from "@/stores/tags";
 
 const hasChanged = (prev: string[], curr: string[]) => {
 	if (prev.length !== curr.length) {
@@ -144,6 +144,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 	},
 	computed: {
 		...mapStores(
+			useTagsStore,
 			useRootStore,
 			useSettingsStore,
 			useUIStore,
@@ -350,7 +351,7 @@ export default mixins(workflowHelpers, titleChange).extend({
 							instanceId: this.rootStore.instanceId,
 						},
 						tags: (tags || []).map(tagId => {
-							const {usageCount, ...tag} = this.$store.getters["tags/getTagById"](tagId);
+							const {usageCount, ...tag} = this.tagsStore.getTagById(tagId);
 
 							return tag;
 						}),

packages/editor-ui/src/components/MainSidebar.vue

@@ -55,6 +55,7 @@
 import {
 	IExecutionResponse,
 	IMenuItem,
+	IVersion,
 } from '../Interface';
 
 import ExecutionsList from '@/components/ExecutionsList.vue';
@@ -69,7 +70,6 @@ import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 import { workflowRun } from '@/components/mixins/workflowRun';
 
 import mixins from 'vue-typed-mixins';
-import { mapGetters } from 'vuex';
 import {
 	MODAL_CANCEL,
 	MODAL_CLOSE,
@@ -89,6 +89,7 @@ import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
+import { useVersionsStore } from '@/stores/versions';
 
 export default mixins(
 	genericHelpers,
@@ -120,12 +121,15 @@ export default mixins(
 				useSettingsStore,
 				useUIStore,
 				useUsersStore,
+				useVersionsStore,
 				useWorkflowsStore,
 			),
-			...mapGetters('versions', [
-				'hasVersionUpdates',
-				'nextVersions',
-			]),
+			hasVersionUpdates(): boolean {
+				return this.versionsStore.hasVersionUpdates;
+			},
+			nextVersions(): IVersion[] {
+				return this.versionsStore.nextVersions;
+			},
 			isCollapsed(): boolean {
 				return this.uiStore.sidebarMenuCollapsed;
 			},

packages/editor-ui/src/components/Node.vue

@@ -442,7 +442,7 @@ export default mixins(
 		},
 
 		onClick(event: MouseEvent) {
-			this.callDebounced('onClickDebounced', { debounceTime: 300, trailing: true }, event);
+			this.callDebounced('onClickDebounced', { debounceTime: 50, trailing: true }, event);
 		},
 
 		onClickDebounced(event: MouseEvent) {

packages/editor-ui/src/components/Node/NodeCreator/CategorizedItems.vue

@@ -96,6 +96,7 @@ import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
 export default mixins(externalHooks, globalLinkActions).extend({
 	name: 'CategorizedItems',
@@ -146,11 +147,12 @@ export default mixins(externalHooks, globalLinkActions).extend({
 		this.registerCustomAction('showAllNodeCreatorNodes', this.switchToAllTabAndFilter);
 	},
 	destroyed() {
-		this.$store.commit('nodeCreator/setFilter', '');
+		this.nodeCreatorStore.itemsFilter = '';
 		this.unregisterCustomAction('showAllNodeCreatorNodes');
 	},
 	computed: {
 		...mapStores(
+			useNodeCreatorStore,
 			useNodeTypesStore,
 			useRootStore,
 			useWorkflowsStore,
@@ -159,10 +161,10 @@ export default mixins(externalHooks, globalLinkActions).extend({
 			return this.activeSubcategoryHistory[this.activeSubcategoryHistory.length - 1] || null;
 		},
 		nodeFilter(): string {
-			return this.$store.getters['nodeCreator/itemsFilter'];
+			return this.nodeCreatorStore.itemsFilter;
 		},
 		selectedType(): INodeFilterType {
-			return this.$store.getters['nodeCreator/selectedType'];
+			return this.nodeCreatorStore.selectedType;
 		},
 		categoriesWithNodes(): ICategoriesWithNodes {
 			return this.nodeTypesStore.categoriesWithNodes;
@@ -363,14 +365,14 @@ export default mixins(externalHooks, globalLinkActions).extend({
 		},
 		switchToAllTabAndFilter() {
 			const currentFilter = this.nodeFilter;
-			this.$store.commit('nodeCreator/setShowTabs', true);
-			this.$store.commit('nodeCreator/setSelectedType', ALL_NODE_FILTER);
+			this.nodeCreatorStore.showTabs = true;
+			this.nodeCreatorStore.selectedType = ALL_NODE_FILTER;
 			this.activeSubcategoryHistory = [];
 
-			this.$nextTick(() => this.$store.commit('nodeCreator/setFilter', currentFilter));
+			this.$nextTick(() => this.nodeCreatorStore.itemsFilter = currentFilter);
 		},
 		onNodeFilterChange(filter: string) {
-			this.$store.commit('nodeCreator/setFilter', filter);
+			this.nodeCreatorStore.itemsFilter = filter;
 		},
 		selectWebhook() {
 			this.$emit('nodeTypeSelected', WEBHOOK_NODE_TYPE);
@@ -462,7 +464,7 @@ export default mixins(externalHooks, globalLinkActions).extend({
 		},
 		onSubcategorySelected(selected: INodeCreateElement) {
 			this.$emit('onSubcategorySelected', selected);
-			this.$store.commit('nodeCreator/setShowTabs', false);
+			this.nodeCreatorStore.showTabs = false;
 			this.activeSubcategoryIndex = 0;
 			this.activeSubcategoryHistory.push(selected);
 			this.$telemetry.trackNodesPanel('nodeCreateList.onSubcategorySelected', { selected, workflow_id: this.workflowsStore.workflowId });
@@ -472,10 +474,10 @@ export default mixins(externalHooks, globalLinkActions).extend({
 			this.$emit('subcategoryClose', this.activeSubcategory);
 			this.activeSubcategoryHistory.pop();
 			this.activeSubcategoryIndex = 0;
-			this.$store.commit('nodeCreator/setFilter', '');
+			this.nodeCreatorStore.itemsFilter = '';
 
-			if(!this.$store.getters['nodeCreator/showScrim']) {
-				this.$store.commit('nodeCreator/setShowTabs', true);
+			if (!this.nodeCreatorStore.showScrim) {
+				this.nodeCreatorStore.showTabs = true;
 			}
 		},
 

packages/editor-ui/src/components/Node/NodeCreator/CategoryItem.vue

@@ -20,6 +20,7 @@ import { INodeCreateElement, ICategoriesWithNodes } from '@/Interface';
 import { NODE_TYPE_COUNT_MAPPER } from '@/constants';
 import { mapStores } from 'pinia';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
 
 export default Vue.extend({
@@ -30,10 +31,11 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapStores(
+			useNodeCreatorStore,
 			useNodeTypesStore,
 		),
 		selectedType(): "Regular" | "Trigger" | "All" {
-			return this.$store.getters['nodeCreator/selectedType'];
+			return this.nodeCreatorStore.selectedType;
 		},
 		categoriesWithNodes(): ICategoriesWithNodes {
 			return this.nodeTypesStore.categoriesWithNodes;

packages/editor-ui/src/components/Node/NodeCreator/MainPanel.vue

@@ -35,6 +35,7 @@ import TypeSelector from './TypeSelector.vue';
 import { INodeCreateElement } from '@/Interface';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
 export default mixins(externalHooks).extend({
 	name: 'NodeCreateList',
@@ -58,10 +59,11 @@ export default mixins(externalHooks).extend({
 	},
 	computed: {
 		...mapStores(
+			useNodeCreatorStore,
 			useWorkflowsStore,
 		),
 		selectedType(): string {
-			return this.$store.getters['nodeCreator/selectedType'];
+			return this.nodeCreatorStore.selectedType;
 		},
 	},
 	watch: {
@@ -80,10 +82,10 @@ export default mixins(externalHooks).extend({
 	mounted() {
 		this.$externalHooks().run('nodeCreateList.mounted');
 		// Make sure tabs are visible on mount
-		this.$store.commit('nodeCreator/setShowTabs', true);
+		this.nodeCreatorStore.showTabs = true;
 	},
 	destroyed() {
-		this.$store.commit('nodeCreator/setSelectedType', ALL_NODE_FILTER);
+		this.nodeCreatorStore.selectedType = ALL_NODE_FILTER;
 		this.$externalHooks().run('nodeCreateList.destroyed');
 		this.$telemetry.trackNodesPanel('nodeCreateList.destroyed', { workflow_id: this.workflowsStore.workflowId });
 	},

packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue

@@ -32,6 +32,7 @@ import MainPanel from './MainPanel.vue';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
 
 export default Vue.extend({
 	name: 'NodeCreator',
@@ -46,11 +47,12 @@ export default Vue.extend({
 	},
 	computed: {
 		...mapStores(
+			useNodeCreatorStore,
 			useNodeTypesStore,
 			useUIStore,
 		),
 		showScrim(): boolean {
-			return this.$store.getters['nodeCreator/showScrim'];
+			return this.nodeCreatorStore.showScrim;
 		},
 		visibleNodeTypes(): INodeTypeDescription[] {
 			return this.nodeTypesStore.visibleNodeTypes;
@@ -104,7 +106,7 @@ export default Vue.extend({
 	},
 	watch: {
 		active(isActive) {
-			if(isActive === false) this.$store.commit('nodeCreator/setShowScrim', false);
+			if(isActive === false) this.nodeCreatorStore.showScrim = false;
 		},
 	},
 });

packages/editor-ui/src/components/Node/NodeCreator/TypeSelector.vue

@@ -10,6 +10,9 @@
 
 <script lang="ts">
 import { ALL_NODE_FILTER, REGULAR_NODE_FILTER, TRIGGER_NODE_FILTER } from '@/constants';
+import { INodeFilterType } from '@/Interface';
+import { useNodeCreatorStore } from '@/stores/nodeCreator';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -22,16 +25,19 @@ export default Vue.extend({
 		};
 	},
 	methods: {
-		setType(type: string) {
-			this.$store.commit('nodeCreator/setSelectedType', type);
+		setType(type: INodeFilterType) {
+			this.nodeCreatorStore.selectedType = type;
 		},
 	},
 	computed: {
+		...mapStores(
+			useNodeCreatorStore,
+		),
 		showTabs(): boolean {
-			return this.$store.getters['nodeCreator/showTabs'];
+			return this.nodeCreatorStore.showTabs;
 		},
 		selectedType(): string {
-			return this.$store.getters['nodeCreator/selectedType'];
+			return this.nodeCreatorStore.selectedType;
 		},
 	},
 });

packages/editor-ui/src/components/NodeCredentials.vue

@@ -69,7 +69,6 @@ import {
 	ICredentialType,
 	INodeCredentialDescription,
 	INodeCredentialsDetails,
-	INodeTypeDescription,
 } from 'n8n-workflow';
 
 import { genericHelpers } from '@/components/mixins/genericHelpers';
@@ -78,8 +77,6 @@ import { showMessage } from '@/components/mixins/showMessage';
 
 import TitledList from '@/components/TitledList.vue';
 
-import { mapGetters } from "vuex";
-
 import mixins from 'vue-typed-mixins';
 import {getCredentialPermissions} from "@/permissions";
 import { mapStores } from 'pinia';
@@ -87,6 +84,7 @@ import { useUIStore } from '@/stores/ui';
 import { useUsersStore } from '@/stores/users';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useCredentialsStore } from '@/stores/credentials';
 
 export default mixins(
 	genericHelpers,
@@ -105,20 +103,23 @@ export default mixins(
 	data () {
 		return {
 			NEW_CREDENTIALS_TEXT: `- ${this.$locale.baseText('nodeCredentials.createNew')} -`,
-			newCredentialUnsubscribe: null as null | (() => void),
+			subscribedToCredentialType: '',
 		};
 	},
+	mounted() {
+		this.listenForNewCredentials();
+	},
 	computed: {
 		...mapStores(
+			useCredentialsStore,
 			useNodeTypesStore,
 			useUIStore,
 			useUsersStore,
 			useWorkflowsStore,
 		),
-		...mapGetters('credentials', {
-			allCredentialsByType: 'allCredentialsByType',
-			getCredentialTypeByName: 'getCredentialTypeByName',
-		}),
+		allCredentialsByType(): {[type: string]: ICredentialsResponse[]} {
+			return this.credentialsStore.allCredentialsByType;
+		},
 		currentUser (): IUser {
 			return this.usersStore.currentUser || {} as IUser;
 		},
@@ -135,7 +136,7 @@ export default mixins(
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
-			const credType = this.getCredentialTypeByName(this.overrideCredType);
+			const credType = this.credentialsStore.getCredentialTypeByName(this.overrideCredType);
 
 			if (credType) return [credType];
 
@@ -152,7 +153,7 @@ export default mixins(
 			} = {};
 			let credentialType: ICredentialType | null;
 			for (const credentialTypeName of this.credentialTypesNode) {
-				credentialType = this.$store.getters['credentials/getCredentialTypeByName'](credentialTypeName);
+				credentialType = this.credentialsStore.getCredentialTypeByName(credentialTypeName);
 				returnData[credentialTypeName] = credentialType !== null ? credentialType.displayName : credentialTypeName;
 			}
 			return returnData;
@@ -165,7 +166,7 @@ export default mixins(
 	methods: {
 		getCredentialOptions(type: string): ICredentialsResponse[] {
 			return (this.allCredentialsByType as Record<string, ICredentialsResponse[]>)[type].filter((credential) => {
-				const permissions = getCredentialPermissions(this.currentUser, credential, this.$store);
+				const permissions = getCredentialPermissions(this.currentUser, credential);
 
 				return permissions.use;
 			});
@@ -191,27 +192,31 @@ export default mixins(
 
 			return styles;
 		},
-
-		listenForNewCredentials(credentialType: string) {
-			this.stopListeningForNewCredentials();
-
-			this.newCredentialUnsubscribe = this.$store.subscribe((mutation, state) => {
-				if (mutation.type === 'credentials/upsertCredential' || mutation.type === 'credentials/enableOAuthCredential'){
-					this.onCredentialSelected(credentialType, mutation.payload.id);
-				}
-				if (mutation.type === 'credentials/deleteCredential') {
-					this.clearSelectedCredential(credentialType);
-					this.stopListeningForNewCredentials();
+		// TODO: Investigate if this can be solved using only the store data (storing selected flag in credentials objects, ...)
+		listenForNewCredentials() {
+			// Listen for credentials store changes so credential selection can be updated if creds are changed from the modal
+			this.credentialsStore.$subscribe((mutation, state) => {
+				// This data pro stores credential type that the component is currently interested in
+				const credentialType = this.subscribedToCredentialType;
+				const credentialsOfType = this.credentialsStore.allCredentialsByType[credentialType].sort((a, b) => (a.id < b.id ? -1 : 1));
+				if (credentialsOfType.length > 0) {
+					// If nothing has been selected previously, select the first one (newly added)
+					if (!this.selected[credentialType]) {
+						this.onCredentialSelected(credentialType, credentialsOfType[0].id);
+					} else {
+						// Else, check id currently selected cred has been updated
+						const newSelected = credentialsOfType.find(cred => cred.id === this.selected[credentialType].id);
+						// If it has changed, select it
+						if (newSelected && newSelected.name !== this.selected[credentialType].name) {
+							this.onCredentialSelected(credentialType, newSelected.id);
+						} else { // Else select the last cred with that type since selected has been deleted or a new one has been added
+							this.onCredentialSelected(credentialType, credentialsOfType[credentialsOfType.length - 1].id);
+						}
+					}
 				}
+				this.subscribedToCredentialType = '';
 			});
 		},
-
-		stopListeningForNewCredentials() {
-			if (this.newCredentialUnsubscribe) {
-				this.newCredentialUnsubscribe();
-			}
-		},
-
 		clearSelectedCredential(credentialType: string) {
 			const node: INodeUi = this.node;
 
@@ -233,7 +238,10 @@ export default mixins(
 
 		onCredentialSelected (credentialType: string, credentialId: string | null | undefined) {
 			if (credentialId === this.NEW_CREDENTIALS_TEXT) {
-				this.listenForNewCredentials(credentialType);
+				// this.listenForNewCredentials(credentialType);
+				this.subscribedToCredentialType = credentialType;
+			}
+			if (!credentialId || credentialId === this.NEW_CREDENTIALS_TEXT) {
 				this.uiStore.openNewCredential(credentialType);
 				this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: true, workflow_id: this.workflowsStore.workflowId });
 				return;
@@ -250,13 +258,13 @@ export default mixins(
 				},
 			);
 
-			const selectedCredentials = this.$store.getters['credentials/getCredentialById'](credentialId);
+			const selectedCredentials = this.credentialsStore.getCredentialById(credentialId);
 			const oldCredentials = this.node.credentials && this.node.credentials[credentialType] ? this.node.credentials[credentialType] : {};
 
 			const selected = { id: selectedCredentials.id, name: selectedCredentials.name };
 
 			// if credentials has been string or neither id matched nor name matched uniquely
-			if (oldCredentials.id === null || (oldCredentials.id && !this.$store.getters['credentials/getCredentialByIdAndType'](oldCredentials.id, credentialType))) {
+			if (oldCredentials.id === null || (oldCredentials.id && !this.credentialsStore.getCredentialByIdAndType(oldCredentials.id, credentialType))) {
 				// update all nodes in the workflow with the same old/invalid credentials
 				this.workflowsStore.replaceInvalidWorkflowCredentials({
 					credentials: selected,
@@ -333,13 +341,9 @@ export default mixins(
 			this.uiStore.openExistingCredential(id);
 
 			this.$telemetry.track('User opened Credential modal', { credential_type: credentialType, source: 'node', new_credential: false, workflow_id: this.workflowsStore.workflowId });
-
-			this.listenForNewCredentials(credentialType);
+			this.subscribedToCredentialType = credentialType;
 		},
 	},
-	beforeDestroy () {
-		this.stopListeningForNewCredentials();
-	},
 });
 </script>
 

packages/editor-ui/src/components/NodeDetailsView.vue

@@ -132,7 +132,6 @@ import Vue from 'vue';
 import OutputPanel from './OutputPanel.vue';
 import InputPanel from './InputPanel.vue';
 import TriggerPanel from './TriggerPanel.vue';
-import { mapGetters } from 'vuex';
 import {
 	BASE_NODE_SURVEY_URL,
 	START_NODE_TYPE,

packages/editor-ui/src/components/NodeSettings.vue

@@ -669,7 +669,7 @@ export default mixins(externalHooks, nodeHelpers).extend({
 				}
 
 				// Update the data in vuex
-				const updateInformation = {
+				const updateInformation: IUpdateInformation = {
 					name: node.name,
 					value: nodeParameters,
 				};

packages/editor-ui/src/components/ParameterInput.vue

@@ -335,7 +335,6 @@ import { isResourceLocatorValue } from '@/typeGuards';
 
 import mixins from 'vue-typed-mixins';
 import { CUSTOM_API_CALL_KEY } from '@/constants';
-import { mapGetters } from 'vuex';
 import { CODE_NODE_TYPE } from '@/constants';
 import { PropType } from 'vue';
 import { debounceHelper } from './mixins/debounce';
@@ -343,6 +342,7 @@ import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNDVStore } from '@/stores/ndv';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useCredentialsStore } from '@/stores/credentials';
 
 export default mixins(
 	externalHooks,
@@ -477,11 +477,11 @@ export default mixins(
 		},
 		computed: {
 			...mapStores(
+				useCredentialsStore,
 				useNodeTypesStore,
 				useNDVStore,
 				useWorkflowsStore,
 			),
-			...mapGetters('credentials', ['allCredentialTypes']),
 			expressionDisplayValue(): string {
 				if (this.activeDrop || this.forceShowExpression) {
 					return '';
@@ -563,14 +563,14 @@ export default mixins(
 					returnValue = this.expressionEvaluated;
 				}
 
-				if (this.parameter.type === 'credentialsSelect') {
-					const credType = this.$store.getters['credentials/getCredentialTypeByName'](this.value);
+				if (this.parameter.type === 'credentialsSelect' && typeof this.value === 'string') {
+					const credType = this.credentialsStore.getCredentialTypeByName(this.value);
 					if (credType) {
 						returnValue = credType.displayName;
 					}
 				}
 
-				if (this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') {
+				if (Array.isArray(returnValue) && this.parameter.type === 'color' && this.getArgument('showAlpha') === true && returnValue.charAt(0) === '#') {
 					// Convert the value to rgba that el-color-picker can display it correctly
 					const bigint = parseInt(returnValue.slice(1), 16);
 					const h = [];

packages/editor-ui/src/components/PersonalizationModal.vue

@@ -118,7 +118,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import Modal from './Modal.vue';
 import { IFormInputs, IPersonalizationLatestVersion, IPersonalizationSurveyAnswersV3, IUser } from '@/Interface';
 import Vue from 'vue';
-import { getAccountAge } from '@/modules/userHelpers';
+import { getAccountAge } from '@/stores/userHelpers';
 import { GenericValue } from 'n8n-workflow';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';

packages/editor-ui/src/components/ScopesNotice.vue

@@ -6,8 +6,9 @@
 </template>
 
 <script lang="ts">
+import { useCredentialsStore } from '@/stores/credentials';
+import { mapStores } from 'pinia';
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
 
 export default Vue.extend({
 	name: 'ScopesNotice',
@@ -16,7 +17,9 @@ export default Vue.extend({
 		'scopes',
 	],
 	computed: {
-		...mapGetters('credentials', ['getCredentialTypeByName']),
+		...mapStores(
+			useCredentialsStore,
+		),
 		scopesShortContent (): string {
 			return this.$locale.baseText(
 				'nodeSettings.scopes.notice',
@@ -46,7 +49,7 @@ export default Vue.extend({
 			const oauth1Api = this.$locale.baseText('generic.oauth1Api');
 			const oauth2Api = this.$locale.baseText('generic.oauth2Api');
 
-			return this.getCredentialTypeByName(this.activeCredentialType).displayName
+			return this.credentialsStore.getCredentialTypeByName(this.activeCredentialType).displayName
 				.replace(new RegExp(`${oauth1Api}|${oauth2Api}`), '')
 				.trim();
 		},

packages/editor-ui/src/components/TagsContainer.vue

@@ -44,6 +44,8 @@ import Vue from 'vue';
 import { ITag } from '@/Interface';
 import IntersectionObserver from './IntersectionObserver.vue';
 import IntersectionObserved from './IntersectionObserved.vue';
+import { mapStores } from 'pinia';
+import { useTagsStore } from '@/stores/tags';
 
 // random upper limit if none is set to minimize performance impact of observers
 const DEFAULT_MAX_TAGS_LIMIT = 20;
@@ -70,8 +72,11 @@ export default Vue.extend({
 		};
 	},
 	computed: {
+		...mapStores(
+			useTagsStore,
+		),
 		tags() {
-			const tags = this.$props.tagIds.map((tagId: string) => this.$store.getters['tags/getTagById'](tagId))
+			const tags = this.$props.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId))
 				.filter(Boolean); // if tag has been deleted from store
 
 			const limit = this.$props.limit || DEFAULT_MAX_TAGS_LIMIT;

packages/editor-ui/src/components/TagsDropdown.vue

@@ -3,7 +3,7 @@
 		<n8n-select
 			:popperAppendToBody="false"
 			:value="appliedTags"
-			:loading="isLoading"
+			:loading="tagsStore.isLoading"
 			:placeholder="placeholder"
 			:filter-method="filterOptions"
 			@change="onTagsUpdated"
@@ -54,7 +54,6 @@
 
 <script lang="ts">
 import mixins from "vue-typed-mixins";
-import { mapGetters } from "vuex";
 
 import { ITag } from "@/Interface";
 import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from "@/constants";
@@ -62,6 +61,7 @@ import { MAX_TAG_NAME_LENGTH, TAGS_MANAGER_MODAL_KEY } from "@/constants";
 import { showMessage } from "@/components/mixins/showMessage";
 import { mapStores } from "pinia";
 import { useUIStore } from "@/stores/ui";
+import { useTagsStore } from "@/stores/tags";
 
 const MANAGE_KEY = "__manage";
 const CREATE_KEY = "__create";
@@ -112,11 +112,19 @@ export default mixins(showMessage).extend({
 			});
 		}
 
-		this.$store.dispatch("tags/fetchAll");
+		this.tagsStore.fetchAll();
 	},
 	computed: {
-		...mapStores(useUIStore),
-		...mapGetters("tags", ["allTags", "isLoading", "hasTags"]),
+		...mapStores(
+			useTagsStore,
+			useUIStore,
+		),
+		allTags(): ITag[] {
+			return this.tagsStore.allTags;
+		},
+		hasTags(): boolean {
+			return this.tagsStore.hasTags;
+		},
 		options(): ITag[] {
 			return this.allTags
 				.filter((tag: ITag) =>
@@ -125,7 +133,7 @@ export default mixins(showMessage).extend({
 		},
 		appliedTags(): string[] {
 			return this.$props.currentTagIds.filter((id: string) =>
-				this.$store.getters['tags/getTagById'](id),
+				this.tagsStore.getTagById(id),
 			);
 		},
 	},
@@ -137,7 +145,7 @@ export default mixins(showMessage).extend({
 		async onCreate() {
 			const name = this.$data.filter;
 			try {
-				const newTag = await this.$store.dispatch("tags/create", name);
+				const newTag = await this.tagsStore.create(name);
 				this.$emit("update", [...this.$props.currentTagIds, newTag.id]);
 				this.$nextTick(() => this.focusOnTag(newTag.id));
 

packages/editor-ui/src/components/TagsManager/TagsManager.vue

@@ -33,7 +33,6 @@
 <script lang="ts">
 import Vue from "vue";
 import mixins from "vue-typed-mixins";
-import { mapGetters } from "vuex";
 
 import { ITag } from "@/Interface";
 
@@ -42,16 +41,16 @@ import TagsView from "@/components/TagsManager/TagsView/TagsView.vue";
 import NoTagsView from "@/components/TagsManager/NoTagsView.vue";
 import Modal from "@/components/Modal.vue";
 import { TAGS_MANAGER_MODAL_KEY } from '../../constants';
+import { mapStores } from "pinia";
+import { useTagsStore } from "@/stores/tags";
 
 export default mixins(showMessage).extend({
 	name: "TagsManager",
 	created() {
-		this.$store.dispatch("tags/fetchAll", {force: true, withUsageCount: true});
+		this.tagsStore.fetchAll({force: true, withUsageCount: true});
 	},
 	data() {
-		const tagIds = (this.$store.getters['tags/allTags'] as ITag[])
-			.map((tag) => tag.id);
-
+		const tagIds = useTagsStore().allTags.map((tag) => tag.id);
 		return {
 			tagIds,
 			isCreating: false,
@@ -65,9 +64,14 @@ export default mixins(showMessage).extend({
 		Modal,
 	},
 	computed: {
-		...mapGetters("tags", ["isLoading"]),
+		...mapStores(
+			useTagsStore,
+		),
+		isLoading(): boolean {
+			return this.tagsStore.isLoading;
+		},
 		tags(): ITag[] {
-			return this.$data.tagIds.map((tagId: string) => this.$store.getters['tags/getTagById'](tagId))
+			return this.$data.tagIds.map((tagId: string) => this.tagsStore.getTagById(tagId))
 				.filter(Boolean); // if tag is deleted from store
 		},
 		hasTags(): boolean {
@@ -91,7 +95,7 @@ export default mixins(showMessage).extend({
 					);
 				}
 
-				const newTag = await this.$store.dispatch("tags/create", name);
+				const newTag = await this.tagsStore.create(name);
 				this.$data.tagIds = [newTag.id].concat(this.$data.tagIds);
 				cb(newTag);
 			} catch (error) {
@@ -109,7 +113,7 @@ export default mixins(showMessage).extend({
 		},
 
 		async onUpdate(id: string, name: string, cb: (tag: boolean, error?: Error) => void) {
-			const tag = this.$store.getters['tags/getTagById'](id);
+			const tag = this.tagsStore.getTagById(id);
 			const oldName = tag.name;
 
 			try {
@@ -124,7 +128,7 @@ export default mixins(showMessage).extend({
 					return;
 				}
 
-				const updatedTag = await this.$store.dispatch("tags/rename", { id, name });
+				const updatedTag = await this.tagsStore.rename({ id, name });
 				cb(!!updatedTag);
 
 				this.$showMessage({
@@ -146,11 +150,11 @@ export default mixins(showMessage).extend({
 		},
 
 		async onDelete(id: string, cb: (deleted: boolean, error?: Error) => void) {
-			const tag = this.$store.getters['tags/getTagById'](id);
+			const tag = this.tagsStore.getTagById(id);
 			const name = tag.name;
 
 			try {
-				const deleted = await this.$store.dispatch("tags/delete", id);
+				const deleted = await this.tagsStore.delete(id);
 				if (!deleted) {
 					throw new Error(
 						this.$locale.baseText('tagsManager.couldNotDeleteTag'),

packages/editor-ui/src/components/TagsManager/TagsView/TagsView.vue

@@ -31,7 +31,6 @@ import Vue from "vue";
 import { ITag, ITagRow } from "@/Interface";
 import TagsTableHeader from "@/components/TagsManager/TagsView/TagsTableHeader.vue";
 import TagsTable from "@/components/TagsManager/TagsView/TagsTable.vue";
-import { mapGetters } from 'vuex';
 import { mapStores } from "pinia";
 import { useUsersStore } from "@/stores/users";
 

packages/editor-ui/src/components/Telemetry.vue

@@ -52,7 +52,6 @@ export default mixins(externalHooks).extend({
 				{
 					instanceId: this.rootStore.instanceId,
 					userId: this.currentUserId,
-					store: this.$store,
 					versionCli: this.rootStore.versionCli,
 				},
 			);

packages/editor-ui/src/components/TimeAgo.vue

@@ -8,7 +8,6 @@
 import { format, LocaleFunc, register } from 'timeago.js';
 import { convertToHumanReadableDate } from './helpers';
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
 import { mapStores } from 'pinia';
 import { useRootStore } from '@/stores/n8nRootStore';
 

packages/editor-ui/src/components/UpdatesPanel.vue

@@ -54,12 +54,14 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import { mapGetters } from 'vuex';
 
 import ModalDrawer from './ModalDrawer.vue';
 import TimeAgo from './TimeAgo.vue';
 import VersionCard from './VersionCard.vue';
 import { VERSIONS_MODAL_KEY } from '../constants';
+import { mapStores } from 'pinia';
+import { useVersionsStore } from '@/stores/versions';
+import { IVersion } from '@/Interface';
 
 export default Vue.extend({
 	name: 'UpdatesPanel',
@@ -69,7 +71,18 @@ export default Vue.extend({
 		TimeAgo,
 	},
 	computed: {
-		...mapGetters('versions', ['nextVersions', 'currentVersion', 'infoUrl']),
+		...mapStores(
+			useVersionsStore,
+		),
+		nextVersions(): IVersion[] {
+			return this.versionsStore.nextVersions;
+		},
+		currentVersion(): IVersion | undefined {
+			return this.versionsStore.currentVersion;
+		},
+		infoUrl(): string {
+			return this.versionsStore.infoUrl;
+		},
 	},
 	data() {
 		return {

packages/editor-ui/src/components/WorkflowCard.vue

@@ -119,7 +119,7 @@ export default mixins(
 			return this.usersStore.currentUser || {} as IUser;
 		},
 		credentialPermissions(): IPermissions {
-			return getWorkflowPermissions(this.currentUser, this.data, this.$store);
+			return getWorkflowPermissions(this.currentUser, this.data);
 		},
 		actions(): Array<{ label: string; value: string; }> {
 			return [

packages/editor-ui/src/components/WorkflowSettings.vue

@@ -220,7 +220,6 @@ import { restApi } from '@/components/mixins/restApi';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { showMessage } from '@/components/mixins/showMessage';
 import {
-	IN8nUISettings,
 	ITimeoutHMS,
 	IWorkflowDataUpdate,
 	IWorkflowSettings,
@@ -232,7 +231,6 @@ import { PLACEHOLDER_EMPTY_WORKFLOW_ID, WORKFLOW_SETTINGS_MODAL_KEY } from '../c
 
 import mixins from 'vue-typed-mixins';
 
-import { mapGetters } from "vuex";
 import { deepCopy } from "n8n-workflow";
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';

packages/editor-ui/src/components/mixins/externalHooks.ts

@@ -1,11 +1,13 @@
 import { IExternalHooks, IRootState } from '@/Interface';
+import { store } from '@/store';
+import { useWebhooksStore } from '@/stores/webhooks';
 import { IDataObject } from 'n8n-workflow';
+import { Store } from 'pinia';
 import Vue from 'vue';
-import { Store } from 'vuex';
 
 export async function runExternalHook(
 	eventName: string,
-	store: Store<IRootState>,
+	store: Store,
 	metadata?: IDataObject,
 ) {
 	// @ts-ignore
@@ -31,7 +33,7 @@ export const externalHooks = Vue.extend({
 		$externalHooks(): IExternalHooks {
 			return {
 				run: async (eventName: string, metadata?: IDataObject): Promise<void> => {
-					await runExternalHook.call(this, eventName, this.$store, metadata);
+					await runExternalHook.call(this, eventName, useWebhooksStore(), metadata);
 				},
 			};
 		},

packages/editor-ui/src/components/mixins/newVersions.ts

@@ -1,29 +1,30 @@
 import mixins from 'vue-typed-mixins';
 import { showMessage } from './showMessage';
-import {
-	IVersion,
-} from '../../Interface';
 import { VERSIONS_MODAL_KEY } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
+import { useVersionsStore } from '@/stores/versions';
 
 export const newVersions = mixins(
 	showMessage,
 ).extend({
 	computed: {
-		...mapStores(useUIStore),
+		...mapStores(
+			useUIStore,
+			useVersionsStore,
+		),
 	},
 	methods: {
 		async checkForNewVersions() {
-			const enabled = this.$store.getters['versions/areNotificationsEnabled'];
+			const enabled = this.versionsStore.areNotificationsEnabled;
 			if (!enabled) {
 				return;
 			}
 
-			await this.$store.dispatch('versions/fetchVersions');
+			await this.versionsStore.fetchVersions();
 
-			const currentVersion: IVersion | undefined = this.$store.getters['versions/currentVersion'];
-			const nextVersions: IVersion[] = this.$store.getters['versions/nextVersions'];
+			const currentVersion = this.versionsStore.currentVersion;
+			const nextVersions = this.versionsStore.nextVersions;
 			if (currentVersion && currentVersion.hasSecurityIssue && nextVersions.length) {
 				const fixVersion = currentVersion.securityIssueFixVersion;
 				let message = `Please update to latest version.`;

packages/editor-ui/src/components/mixins/nodeHelpers.ts

@@ -12,13 +12,11 @@ import {
 	INodeCredentialsDetails,
 	INodeExecutionData,
 	INodeIssues,
-	INodeIssueData,
 	INodeIssueObjectProperty,
 	INodeParameters,
 	INodeProperties,
 	INodeTypeDescription,
 	IRunData,
-	IRunExecutionData,
 	ITaskDataConnections,
 	INode,
 	INodePropertyOptions,
@@ -37,7 +35,6 @@ import { restApi } from '@/components/mixins/restApi';
 import { get } from 'lodash';
 
 import mixins from 'vue-typed-mixins';
-import { mapGetters } from 'vuex';
 import { isObjectLiteral } from '@/utils';
 import {getCredentialPermissions} from "@/permissions";
 import { mapStores } from 'pinia';
@@ -45,6 +42,7 @@ import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useCredentialsStore } from '@/stores/credentials';
 
 export const nodeHelpers = mixins(
 	restApi,
@@ -52,11 +50,11 @@ export const nodeHelpers = mixins(
 	.extend({
 		computed: {
 			...mapStores(
+				useCredentialsStore,
 				useNodeTypesStore,
 				useSettingsStore,
 				useWorkflowsStore,
 			),
-			...mapGetters('credentials', [ 'getCredentialTypeByName', 'getCredentialsByType' ]),
 		},
 		methods: {
 			hasProxyAuth (node: INodeUi): boolean {
@@ -138,7 +136,7 @@ export const nodeHelpers = mixins(
 			// Set the status on all the nodes which produced an error so that it can be
 			// displayed in the node-view
 			hasNodeExecutionIssues (node: INodeUi): boolean {
-				const workflowResultData: IRunData = this.workflowsStore.getWorkflowRunData;
+				const workflowResultData = this.workflowsStore.getWorkflowRunData;
 
 				if (workflowResultData === null || !workflowResultData.hasOwnProperty(node.name)) {
 					return false;
@@ -247,7 +245,7 @@ export const nodeHelpers = mixins(
 				let credentialType: ICredentialType | null;
 				let credentialDisplayName: string;
 				let selectedCredentials: INodeCredentialsDetails;
-				const foreignCredentials = this.$store.getters['credentials/allForeignCredentials'];
+				const foreignCredentials = this.credentialsStore.allForeignCredentials;
 
 				// TODO: Check if any of the node credentials is found in foreign credentials
 				if(foreignCredentials?.some(() => true)){
@@ -269,7 +267,7 @@ export const nodeHelpers = mixins(
 					genericAuthType !== '' &&
 					selectedCredsAreUnusable(node, genericAuthType)
 				) {
-					const credential = this.getCredentialTypeByName(genericAuthType);
+					const credential = this.credentialsStore.getCredentialTypeByName(genericAuthType);
 					return this.reportUnsetCredential(credential);
 				}
 
@@ -279,10 +277,10 @@ export const nodeHelpers = mixins(
 					nodeCredentialType !== '' &&
 					node.credentials !== undefined
 				) {
-					const stored = this.getCredentialsByType(nodeCredentialType);
+					const stored = this.credentialsStore.getCredentialsByType(nodeCredentialType);
 
 					if (selectedCredsDoNotExist(node, nodeCredentialType, stored)) {
-						const credential = this.getCredentialTypeByName(nodeCredentialType);
+						const credential = this.credentialsStore.getCredentialTypeByName(nodeCredentialType);
 						return this.reportUnsetCredential(credential);
 					}
 				}
@@ -293,7 +291,7 @@ export const nodeHelpers = mixins(
 					nodeCredentialType !== '' &&
 					selectedCredsAreUnusable(node, nodeCredentialType)
 				) {
-					const credential = this.getCredentialTypeByName(nodeCredentialType);
+					const credential = this.credentialsStore.getCredentialTypeByName(nodeCredentialType);
 					return this.reportUnsetCredential(credential);
 				}
 
@@ -304,7 +302,7 @@ export const nodeHelpers = mixins(
 					}
 
 					// Get the display name of the credential type
-					credentialType = this.$store.getters['credentials/getCredentialTypeByName'](credentialTypeDescription.name);
+					credentialType = this.credentialsStore.getCredentialTypeByName(credentialTypeDescription.name);
 					if (credentialType === null) {
 						credentialDisplayName = credentialTypeDescription.name;
 					} else {
@@ -328,9 +326,9 @@ export const nodeHelpers = mixins(
 
 						const usersStore = useUsersStore();
 						const currentUser = usersStore.currentUser || {} as IUser;
-						userCredentials = this.$store.getters['credentials/getCredentialsByType'](credentialTypeDescription.name)
+						userCredentials = this.credentialsStore.getCredentialsByType(credentialTypeDescription.name)
 							.filter((credential: ICredentialsResponse) => {
-								const permissions = getCredentialPermissions(currentUser, credential, this.$store);
+								const permissions = getCredentialPermissions(currentUser, credential);
 								return permissions.use;
 							});
 

packages/editor-ui/src/components/mixins/pushConnection.ts

@@ -27,6 +27,7 @@ import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
+import { useCredentialsStore } from '@/stores/credentials';
 
 export const pushConnection = mixins(
 	externalHooks,
@@ -46,6 +47,7 @@ export const pushConnection = mixins(
 		},
 		computed: {
 			...mapStores(
+				useCredentialsStore,
 				useNodeTypesStore,
 				useUIStore,
 				useWorkflowsStore,
@@ -443,7 +445,7 @@ export const pushConnection = mixins(
 					const nodesToBeRemoved: INodeTypeNameVersion[] = [pushData];
 
 					// Force reload of all credential types
-					this.$store.dispatch('credentials/fetchCredentialTypes')
+					this.credentialsStore.fetchCredentialTypes()
 						.then(() => {
 							this.nodeTypesStore.removeNodeTypes(nodesToBeRemoved);
 						});

packages/editor-ui/src/components/mixins/userHelpers.ts

@@ -1,5 +1,5 @@
 import { IPermissions, IUser } from '@/Interface';
-import { isAuthorized } from '@/modules/userHelpers';
+import { isAuthorized } from '@/stores/userHelpers';
 import { useUsersStore } from '@/stores/users';
 import Vue from 'vue';
 import { Route } from 'vue-router';