refactor: migration to pinia

2022-04-30 00:47:37 +02:00 · 2022-04-30 00:47:37 +02:00 · 0d52282aa8
parent e9dedfaf32
commit 0d52282aa8
75 changed files with 2079 additions and 1814 deletions
--- a/scripts/devtoolsInstaller.js
+++ b/scripts/devtoolsInstaller.js
@ -40,6 +40,7 @@ const downloadFile = url => {
      await downloadFile(fileUrl);
      await unzip(filePath, destFolder);
      fs.unlinkSync(filePath);
+      fs.unlinkSync(`${destFolder}/package.json`);// <- Avoid to display annoyng npm script in vscode
   }
   catch (error) {
      console.log(error);
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@ -26,11 +26,13 @@

 <script>
 import { defineAsyncComponent } from 'vue';
-import { mapGetters } from 'vuex';
 import { storeToRefs } from 'pinia';
 import { ipcRenderer } from 'electron';
 import { Menu, getCurrentWindow } from '@electron/remote';
 import { useApplicationStore } from '@/stores/application';
+import { useConnectionsStore } from '@/stores/connections';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import TheSettingBar from '@/components/TheSettingBar';

 export default {
@ -48,30 +50,32 @@ export default {
   },
   setup () {
      const applicationStore = useApplicationStore();
+      const connectionsStore = useConnectionsStore();
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
+
      const {
         isLoading,
         isSettingModal,
         isScratchpad
      } = storeToRefs(applicationStore);
+      const { connections } = storeToRefs(connectionsStore);
+      const { applicationTheme, disableBlur } = storeToRefs(settingsStore);
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);

      const { checkVersionUpdate } = applicationStore;

      return {
-         applicationStore,
         isLoading,
         isSettingModal,
         isScratchpad,
-         checkVersionUpdate
+         checkVersionUpdate,
+         connections,
+         applicationTheme,
+         disableBlur,
+         selectedWorkspace
      };
   },
-   computed: {
-      ...mapGetters({
-         connections: 'connections/getConnections',
-         applicationTheme: 'settings/getApplicationTheme',
-         disableBlur: 'settings/getDisableBlur',
-         selectedWorkspace: 'workspaces/getSelected'
-      })
-   },
   mounted () {
      ipcRenderer.send('check-for-updates');
      this.checkVersionUpdate();
--- a/src/renderer/components/BaseTextEditor.vue
+++ b/src/renderer/components/BaseTextEditor.vue
@ -12,7 +12,8 @@
 <script>
 import * as ace from 'ace-builds';
 import 'ace-builds/webpack-resolver';
-import { mapGetters } from 'vuex';
+import { storeToRefs } from 'pinia';
+import { useSettingsStore } from '@/stores/settings';
 import { uidGen } from 'common/libs/uidGen';

 export default {
@ -27,20 +28,29 @@ export default {
      height: { type: Number, default: 200 }
   },
   emits: ['update:modelValue'],
+   setup () {
+      const settingsStore = useSettingsStore();
+
+      const {
+         editorTheme,
+         editorFontSize,
+         autoComplete,
+         lineWrap
+      } = storeToRefs(settingsStore);
+
+      return {
+         editorTheme,
+         editorFontSize,
+         autoComplete,
+         lineWrap
+      };
+   },
   data () {
      return {
         editor: null,
-         id: null
+         id: uidGen()
      };
   },
-   computed: {
-      ...mapGetters({
-         editorTheme: 'settings/getEditorTheme',
-         editorFontSize: 'settings/getEditorFontSize',
-         autoComplete: 'settings/getAutoComplete',
-         lineWrap: 'settings/getLineWrap'
-      })
-   },
   watch: {
      mode () {
         if (this.editor)
@ -78,9 +88,6 @@ export default {
         }
      }
   },
-   created () {
-      this.id = uidGen('E');
-   },
   mounted () {
      this.editor = ace.edit(`editor-${this.id}`, {
         mode: `ace/mode/${this.mode}`,
--- a/src/renderer/components/BaseUploadInput.vue
+++ b/src/renderer/components/BaseUploadInput.vue
@ -4,10 +4,10 @@
         <i class="mdi mdi-folder-open mr-1" />{{ message }}
      </span>
      <span class="text-ellipsis file-uploader-value">
-         {{ lastPart(value) }}
+         {{ lastPart(modelValue) }}
      </span>
      <i
-         v-if="value.length"
+         v-if="modelValue.length"
         class="file-uploader-reset mdi mdi-close"
         @click.prevent="clear"
      />
@ -30,7 +30,7 @@ export default {
         default: 'Browse',
         type: String
      },
-      value: {
+      modelValue: {
         default: '',
         type: String
      }
--- a/src/renderer/components/FakerSelect.vue
+++ b/src/renderer/components/FakerSelect.vue
@ -105,7 +105,6 @@
 </template>

 <script>
-import { VueMaskDirective } from 'v-mask';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
 import BaseUploadInput from '@/components/BaseUploadInput';
 import ForeignKeySelect from '@/components/ForeignKeySelect';
@ -117,9 +116,6 @@ export default {
      ForeignKeySelect,
      BaseUploadInput
   },
-   directives: {
-      mask: VueMaskDirective
-   },
   props: {
      type: String,
      field: Object,
--- a/src/renderer/components/ForeignKeySelect.vue
+++ b/src/renderer/components/ForeignKeySelect.vue
@ -22,8 +22,10 @@

 <script>
 import Tables from '@/ipc-api/Tables';
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import { TEXT, LONG_TEXT } from 'common/fieldTypes';
+import { storeToRefs } from 'pinia';
 export default {
   name: 'ForeignKeySelect',
   props: {
@ -35,15 +37,20 @@ export default {
      }
   },
   emits: ['update:modelValue', 'blur'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      return { addNotification, selectedWorkspace };
+   },
   data () {
      return {
         foreignList: []
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected'
-      }),
      isValidDefault () {
         if (!this.foreignList.length) return true;
         if (this.modelValue === null) return false;
@ -88,9 +95,6 @@ export default {
      }
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      onChange () {
         this.$emit('update:modelValue', this.$refs.editField.value);
      },
--- a/src/renderer/components/ModalEditSchema.vue
+++ b/src/renderer/components/ModalEditSchema.vue
@ -68,8 +68,10 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Schema from '@/ipc-api/Schema';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'ModalEditSchema',
@ -77,6 +79,21 @@ export default {
      selectedSchema: String
   },
   emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, getDatabaseVariable } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getDatabaseVariable
+      };
+   },
   data () {
      return {
         database: {
@ -87,11 +104,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         getDatabaseVariable: 'workspaces/getDatabaseVariable'
-      }),
      collations () {
         return this.getWorkspace(this.selectedWorkspace).collations;
      },
@ -131,9 +143,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      async updateSchema () {
         if (this.database.collation !== this.database.prevCollation) {
            try {
--- a/src/renderer/components/ModalExportSchema.vue
+++ b/src/renderer/components/ModalExportSchema.vue
@ -271,7 +271,8 @@

 <script>
 import { ipcRenderer } from 'electron';
-import { mapActions, mapGetters } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import moment from 'moment';
 import customizations from 'common/customizations';
 import Application from '@/ipc-api/Application';
@ -279,11 +280,30 @@ import Schema from '@/ipc-api/Schema';

 export default {
   name: 'ModalExportSchema',
-
   props: {
      selectedSchema: String
   },
   emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         getDatabaseVariable,
+         refreshSchema
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getDatabaseVariable,
+         refreshSchema
+      };
+   },
   data () {
      return {
         isExporting: false,
@ -301,11 +321,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         getDatabaseVariable: 'workspaces/getDatabaseVariable'
-      }),
      currentWorkspace () {
         return this.getWorkspace(this.selectedWorkspace);
      },
@ -370,10 +385,6 @@ export default {
      ipcRenderer.off('export-progress', this.updateProgress);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshSchema: 'workspaces/refreshSchema'
-      }),
      async startExport () {
         this.isExporting = true;
         const { uid, client } = this.currentWorkspace;
--- a/src/renderer/components/ModalFakerRows.vue
+++ b/src/renderer/components/ModalFakerRows.vue
@ -188,7 +188,8 @@
 <script>
 import moment from 'moment';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Tables from '@/ipc-api/Tables';
 import FakerSelect from '@/components/FakerSelect';

@ -203,6 +204,21 @@ export default {
      keyUsage: Array
   },
   emits: ['reload', 'hide'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, getWorkspaceTab } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getWorkspaceTab
+      };
+   },
   data () {
      return {
         localRow: {},
@ -213,11 +229,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         getWorkspaceTab: 'workspaces/getWorkspaceTab'
-      }),
      workspace () {
         return this.getWorkspace(this.selectedWorkspace);
      },
@ -288,9 +299,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      typeClass (type) {
         if (type)
            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
--- a/src/renderer/components/ModalHistory.vue
+++ b/src/renderer/components/ModalHistory.vue
@ -99,7 +99,9 @@

 <script>
 import moment from 'moment';
-import { mapGetters, mapActions } from 'vuex';
+import { useHistoryStore } from '@/stores/history';
+import { useConnectionsStore } from '@/stores/connections';
+import { useNotificationsStore } from '@/stores/notifications';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';

 export default {
@ -111,6 +113,18 @@ export default {
      connection: Object
   },
   emits: ['select-query', 'close'],
+   setup () {
+      const { getHistoryByWorkspace, deleteQueryFromHistory } = useHistoryStore();
+      const { getConnectionName } = useConnectionsStore();
+      const { addNotification } = useNotificationsStore();
+
+      return {
+         getHistoryByWorkspace,
+         deleteQueryFromHistory,
+         getConnectionName,
+         addNotification
+      };
+   },
   data () {
      return {
         resultsSize: 1000,
@ -122,10 +136,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getConnectionName: 'connections/getConnectionName',
-         getHistoryByWorkspace: 'history/getHistoryByWorkspace'
-      }),
      connectionName () {
         return this.getConnectionName(this.connection.uid);
      },
@ -165,10 +175,6 @@ export default {
      clearInterval(this.refreshInterval);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         deleteQueryFromHistory: 'history/deleteQueryFromHistory'
-      }),
      copyQuery (sql) {
         navigator.clipboard.writeText(sql);
      },
--- a/src/renderer/components/ModalImportSchema.vue
+++ b/src/renderer/components/ModalImportSchema.vue
@ -51,9 +51,11 @@

 <script>
 import { ipcRenderer } from 'electron';
-import { mapActions, mapGetters } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import moment from 'moment';
 import Schema from '@/ipc-api/Schema';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'ModalImportSchema',
@ -62,6 +64,21 @@ export default {
      selectedSchema: String
   },
   emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, refreshSchema } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshSchema
+      };
+   },
   data () {
      return {
         sqlFile: '',
@ -74,10 +91,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      currentWorkspace () {
         return this.getWorkspace(this.selectedWorkspace);
      },
@ -99,10 +112,6 @@ export default {
      ipcRenderer.off('query-error', this.handleQueryError);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshSchema: 'workspaces/refreshSchema'
-      }),
      async startImport (sqlFile) {
         this.isImporting = true;
         this.sqlFile = sqlFile;
--- a/src/renderer/components/ModalNewSchema.vue
+++ b/src/renderer/components/ModalNewSchema.vue
@ -68,12 +68,29 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Schema from '@/ipc-api/Schema';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'ModalNewSchema',
   emits: ['reload', 'close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, getDatabaseVariable } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getDatabaseVariable
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -84,11 +101,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         getDatabaseVariable: 'workspaces/getDatabaseVariable'
-      }),
      collations () {
         return this.getWorkspace(this.selectedWorkspace).collations;
      },
@ -110,9 +122,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      async createSchema () {
         this.isLoading = true;
         try {
--- a/src/renderer/components/ModalNewTableRow.vue
+++ b/src/renderer/components/ModalNewTableRow.vue
@ -121,25 +121,38 @@
 <script>
 import moment from 'moment';
 import { TEXT, LONG_TEXT, NUMBER, FLOAT, DATE, TIME, DATETIME, BLOB, BIT } from 'common/fieldTypes';
-import { VueMaskDirective } from 'v-mask';
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Tables from '@/ipc-api/Tables';
 import ForeignKeySelect from '@/components/ForeignKeySelect';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'ModalNewTableRow',
   components: {
      ForeignKeySelect
   },
-   directives: {
-      mask: VueMaskDirective
-   },
   props: {
      tabUid: [String, Number],
      fields: Array,
      keyUsage: Array
   },
   emits: ['reload', 'hide'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, getWorkspaceTab } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         getWorkspaceTab
+      };
+   },
   data () {
      return {
         localRow: {},
@ -149,11 +162,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace',
-         getWorkspaceTab: 'workspaces/getWorkspaceTab'
-      }),
      workspace () {
         return this.getWorkspace(this.selectedWorkspace);
      },
@ -217,9 +225,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      typeClass (type) {
         if (type)
            return `type-${type.toLowerCase().replaceAll(' ', '_').replaceAll('"', '')}`;
--- a/src/renderer/components/ModalProcessesList.vue
+++ b/src/renderer/components/ModalProcessesList.vue
@ -134,9 +134,10 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
 import arrayToFile from '../libs/arrayToFile';
+import { useNotificationsStore } from '@/stores/notifications';
 import Schema from '@/ipc-api/Schema';
+import { useConnectionsStore } from '@/stores/connections';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';
 import ModalProcessesListRow from '@/components/ModalProcessesListRow';
 import ModalProcessesListContext from '@/components/ModalProcessesListContext';
@ -152,6 +153,12 @@ export default {
      connection: Object
   },
   emits: ['close'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const { getConnectionName } = useConnectionsStore();
+
+      return { addNotification, getConnectionName };
+   },
   data () {
      return {
         resultsSize: 1000,
@ -170,9 +177,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getConnectionName: 'connections/getConnectionName'
-      }),
      connectionName () {
         return this.getConnectionName(this.connection.uid);
      },
@ -212,9 +216,6 @@ export default {
      clearInterval(this.refreshInterval);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      async getProcessesList () {
         this.isQuering = true;

--- a/src/renderer/components/ModalSettings.vue
+++ b/src/renderer/components/ModalSettings.vue
@ -319,9 +319,10 @@

 <script>
 import { shell } from 'electron';
-import { mapActions, mapGetters } from 'vuex';
 import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import localesNames from '@/i18n/supported-locales';
 import ModalSettingsUpdate from '@/components/ModalSettingsUpdate';
 import ModalSettingsChangelog from '@/components/ModalSettingsChangelog';
@ -336,23 +337,75 @@ export default {
   },
   setup () {
      const applicationStore = useApplicationStore();
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
+
      const {
         selectedSettingTab,
         updateStatus
      } = storeToRefs(applicationStore);
+      const {
+         locale: selectedLocale,
+         dataTabLimit: pageSize,
+         autoComplete: selectedAutoComplete,
+         lineWrap: selectedLineWrap,
+         notificationsTimeout,
+         restoreTabs,
+         disableBlur,
+         applicationTheme,
+         editorTheme,
+         editorFontSize
+      } = storeToRefs(settingsStore);

+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         changeLocale,
+         changePageSize,
+         changeRestoreTabs,
+         changeDisableBlur,
+         changeAutoComplete,
+         changeLineWrap,
+         changeApplicationTheme,
+         changeEditorTheme,
+         changeEditorFontSize,
+         updateNotificationsTimeout
+      } = settingsStore;
      const {
         hideSettingModal,
         appName,
         appVersion
      } = applicationStore;
+      const { getWorkspace } = workspacesStore;

      return {
         appName,
         appVersion,
         selectedSettingTab,
         updateStatus,
-         closeModal: hideSettingModal
+         closeModal: hideSettingModal,
+         selectedLocale,
+         pageSize,
+         selectedAutoComplete,
+         selectedLineWrap,
+         notificationsTimeout,
+         restoreTabs,
+         disableBlur,
+         applicationTheme,
+         editorTheme,
+         editorFontSize,
+         changeLocale,
+         changePageSize,
+         changeRestoreTabs,
+         changeDisableBlur,
+         changeAutoComplete,
+         changeLineWrap,
+         changeApplicationTheme,
+         changeEditorTheme,
+         changeEditorFontSize,
+         updateNotificationsTimeout,
+         selectedWorkspace,
+         getWorkspace
      };
   },
   data () {
@ -417,20 +470,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedLocale: 'settings/getLocale',
-         pageSize: 'settings/getDataTabLimit',
-         selectedAutoComplete: 'settings/getAutoComplete',
-         selectedLineWrap: 'settings/getLineWrap',
-         notificationsTimeout: 'settings/getNotificationsTimeout',
-         restoreTabs: 'settings/getRestoreTabs',
-         disableBlur: 'settings/getDisableBlur',
-         applicationTheme: 'settings/getApplicationTheme',
-         editorTheme: 'settings/getEditorTheme',
-         editorFontSize: 'settings/getEditorFontSize',
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      locales () {
         const locales = [];
         for (const locale of this.$i18n.availableLocales)
@ -480,18 +519,6 @@ ORDER BY
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         changeLocale: 'settings/changeLocale',
-         changePageSize: 'settings/changePageSize',
-         changeRestoreTabs: 'settings/changeRestoreTabs',
-         changeDisableBlur: 'settings/changeDisableBlur',
-         changeAutoComplete: 'settings/changeAutoComplete',
-         changeLineWrap: 'settings/changeLineWrap',
-         changeApplicationTheme: 'settings/changeApplicationTheme',
-         changeEditorTheme: 'settings/changeEditorTheme',
-         changeEditorFontSize: 'settings/changeEditorFontSize',
-         updateNotificationsTimeout: 'settings/updateNotificationsTimeout'
-      }),
      selectTab (tab) {
         this.selectedTab = tab;
      },
--- a/src/renderer/components/ModalSettingsUpdate.vue
+++ b/src/renderer/components/ModalSettingsUpdate.vue
@ -54,28 +54,32 @@

 <script>
 import { ipcRenderer, shell } from 'electron';
-import { mapGetters, mapActions } from 'vuex';
 import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
+import { useSettingsStore } from '@/stores/settings';

 export default {
   name: 'ModalSettingsUpdate',
   setup () {
      const applicationStore = useApplicationStore();
+      const settingsStore = useSettingsStore();
+
      const {
         updateStatus,
         getDownloadProgress
      } = storeToRefs(applicationStore);
+      const { allowPrerelease } = storeToRefs(settingsStore);
+
+      const { changeAllowPrerelease } = settingsStore;

      return {
         updateStatus,
-         downloadPercentage: getDownloadProgress
+         downloadPercentage: getDownloadProgress,
+         allowPrerelease,
+         changeAllowPrerelease
      };
   },
   computed: {
-      ...mapGetters({
-         allowPrerelease: 'settings/getAllowPrerelease'
-      }),
      updateMessage () {
         switch (this.updateStatus) {
            case 'noupdate':
@ -98,9 +102,6 @@ export default {
      }
   },
   methods: {
-      ...mapActions({
-         changeAllowPrerelease: 'settings/changeAllowPrerelease'
-      }),
      openOutside (link) {
         shell.openExternal(link);
      },
--- a/src/renderer/components/QueryEditor.vue
+++ b/src/renderer/components/QueryEditor.vue
@ -12,9 +12,9 @@
 import * as ace from 'ace-builds';
 import 'ace-builds/webpack-resolver';
 import '../libs/ext-language_tools';
-import { mapGetters } from 'vuex';
 import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
+import { useSettingsStore } from '@/stores/settings';
 import Tables from '@/ipc-api/Tables';

 export default {
@ -32,14 +32,26 @@ export default {
   setup () {
      const editor = null;
      const applicationStore = useApplicationStore();
+      const settingsStore = useSettingsStore();
+
      const { setBaseCompleters } = applicationStore;
+
      const { baseCompleter } = storeToRefs(applicationStore);
+      const {
+         editorTheme,
+         editorFontSize,
+         autoComplete,
+         lineWrap
+      } = storeToRefs(settingsStore);

      return {
         editor,
-
         baseCompleter,
-         setBaseCompleters
+         setBaseCompleters,
+         editorTheme,
+         editorFontSize,
+         autoComplete,
+         lineWrap
      };
   },
   data () {
@ -52,12 +64,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         editorTheme: 'settings/getEditorTheme',
-         editorFontSize: 'settings/getEditorFontSize',
-         autoComplete: 'settings/getAutoComplete',
-         lineWrap: 'settings/getLineWrap'
-      }),
      tables () {
         return this.workspace
            ? this.workspace.structure.filter(schema => schema.name === this.schema)
--- a/src/renderer/components/SettingBarContext.vue
+++ b/src/renderer/components/SettingBarContext.vue
@ -30,10 +30,12 @@
 </template>

 <script>
-import { mapActions, mapGetters } from 'vuex';
 import { uidGen } from 'common/libs/uidGen';
+import { useConnectionsStore } from '@/stores/connections';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'SettingBarContext',
@ -46,6 +48,25 @@ export default {
      contextConnection: Object
   },
   emits: ['close-context'],
+   setup () {
+      const {
+         getConnectionName,
+         addConnection,
+         deleteConnection
+      } = useConnectionsStore();
+      const workspacesStore = useWorkspacesStore();
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { selectWorkspace } = workspacesStore;
+
+      return {
+         getConnectionName,
+         addConnection,
+         deleteConnection,
+         selectedWorkspace,
+         selectWorkspace
+      };
+   },
   data () {
      return {
         isConfirmModal: false,
@ -53,20 +74,11 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getConnectionName: 'connections/getConnectionName',
-         selectedWorkspace: 'workspaces/getSelected'
-      }),
      connectionName () {
         return this.getConnectionName(this.contextConnection.uid);
      }
   },
   methods: {
-      ...mapActions({
-         addConnection: 'connections/addConnection',
-         deleteConnection: 'connections/deleteConnection',
-         selectWorkspace: 'workspaces/selectWorkspace'
-      }),
      confirmDeleteConnection () {
         if (this.selectedWorkspace === this.contextConnection.uid)
            this.selectWorkspace();
@ -78,7 +90,7 @@ export default {
         connectionCopy = {
            ...connectionCopy,
            uid: uidGen('C'),
-            name: connectionCopy.name ? `${connectionCopy.name}_copy` : ''
+            name: connectionCopy.name ? `${connectionCopy?.name}_copy` : ''
         };

         this.addConnection(connectionCopy);
--- a/src/renderer/components/TheFooter.vue
+++ b/src/renderer/components/TheFooter.vue
@ -27,27 +27,30 @@
 </template>

 <script>
-import { mapGetters } from 'vuex';
 import { useApplicationStore } from '@/stores/application';
+import { useWorkspacesStore } from '@/stores/workspaces';
+import { storeToRefs } from 'pinia';
 const { shell } = require('electron');

 export default {
   name: 'TheFooter',
   setup () {
      const applicationStore = useApplicationStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: workspace } = storeToRefs(workspacesStore);

      const { appVersion, showSettingModal } = applicationStore;
+      const { getWorkspace } = workspacesStore;

      return {
         appVersion,
-         showSettingModal
+         showSettingModal,
+         workspace,
+         getWorkspace
      };
   },
   computed: {
-      ...mapGetters({
-         workspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      version () {
         return this.getWorkspace(this.workspace) ? this.getWorkspace(this.workspace).version : null;
      },
--- a/src/renderer/components/TheNotificationsBoard.vue
+++ b/src/renderer/components/TheNotificationsBoard.vue
@ -17,24 +17,37 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useSettingsStore } from '@/stores/settings';
 import BaseNotification from '@/components/BaseNotification';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'TheNotificationsBoard',
   components: {
      BaseNotification
   },
+   setup () {
+      const notificationsStore = useNotificationsStore();
+      const settingsStore = useSettingsStore();
+
+      const { removeNotification } = notificationsStore;
+
+      const { notifications } = storeToRefs(notificationsStore);
+      const { notificationsTimeout } = storeToRefs(settingsStore);
+
+      return {
+         removeNotification,
+         notifications,
+         notificationsTimeout
+      };
+   },
   data () {
      return {
         timeouts: {}
      };
   },
   computed: {
-      ...mapGetters({
-         notifications: 'notifications/getNotifications',
-         notificationsTimeout: 'settings/getNotificationsTimeout'
-      }),
      latestNotifications () {
         return this.notifications.slice(0, 10);
      }
@ -51,9 +64,6 @@ export default {
      }
   },
   methods: {
-      ...mapActions({
-         removeNotification: 'notifications/removeNotification'
-      }),
      clearTimeouts () {
         for (const uid in this.timeouts) {
            clearTimeout(this.timeouts[uid]);
--- a/src/renderer/components/TheScratchpad.vue
+++ b/src/renderer/components/TheScratchpad.vue
@ -29,10 +29,11 @@
 </template>

 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import TextEditor from '@/components/BaseTextEditor';
+import { useScratchpadStore } from '@/stores/scratchpad';

 export default {
   name: 'TheScratchpad',
@ -43,8 +44,16 @@ export default {
   emits: ['hide'],
   setup () {
      const applicationStore = useApplicationStore();
+      const scratchpadStore = useScratchpadStore();

-      return { hideScratchpad: applicationStore.hideScratchpad };
+      const { notes } = storeToRefs(scratchpadStore);
+      const { changeNotes } = scratchpadStore;
+
+      return {
+         notes,
+         hideScratchpad: applicationStore.hideScratchpad,
+         changeNotes
+      };
   },
   data () {
      return {
@ -52,11 +61,6 @@ export default {
         debounceTimeout: null
      };
   },
-   computed: {
-      ...mapGetters({
-         notes: 'scratchpad/getNotes'
-      })
-   },
   watch: {
      localNotes () {
         clearTimeout(this.debounceTimeout);
@ -70,9 +74,6 @@ export default {
      this.localNotes = this.notes;
   },
   methods: {
-      ...mapActions({
-         changeNotes: 'scratchpad/changeNotes'
-      }),
      hideModal () {
         this.$emit('hide');
      }
--- a/src/renderer/components/TheSettingBar.vue
+++ b/src/renderer/components/TheSettingBar.vue
@ -56,9 +56,10 @@
 </template>

 <script>
-import { mapActions, mapGetters } from 'vuex';
 import { storeToRefs } from 'pinia';
 import { useApplicationStore } from '@/stores/application';
+import { useConnectionsStore } from '@/stores/connections';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Draggable from 'vuedraggable';
 import SettingBarContext from '@/components/SettingBarContext';

@ -70,14 +71,28 @@ export default {
   },
   setup () {
      const applicationStore = useApplicationStore();
+      const connectionsStore = useConnectionsStore();
+      const workspacesStore = useWorkspacesStore();
+
      const { updateStatus } = storeToRefs(applicationStore);
+      const { connections: getConnections } = storeToRefs(connectionsStore);
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
      const { showSettingModal, showScratchpad } = applicationStore;
+      const { getConnectionName, updateConnections } = connectionsStore;
+      const { getWorkspace, selectWorkspace } = workspacesStore;

      return {
         applicationStore,
         updateStatus,
         showSettingModal,
-         showScratchpad
+         showScratchpad,
+         getConnections,
+         getConnectionName,
+         updateConnections,
+         selectedWorkspace,
+         getWorkspace,
+         selectWorkspace
      };
   },
   data () {
@ -91,12 +106,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getConnections: 'connections/getConnections',
-         getConnectionName: 'connections/getConnectionName',
-         getWorkspace: 'workspaces/getWorkspace',
-         selectedWorkspace: 'workspaces/getSelected'
-      }),
      connections: {
         get () {
            return this.getConnections;
@ -110,10 +119,6 @@ export default {
      }
   },
   methods: {
-      ...mapActions({
-         updateConnections: 'connections/updateConnections',
-         selectWorkspace: 'workspaces/selectWorkspace'
-      }),
      contextMenu (event, connection) {
         this.contextEvent = event;
         this.contextConnection = connection;
--- a/src/renderer/components/TheTitleBar.vue
+++ b/src/renderer/components/TheTitleBar.vue
@ -55,10 +55,26 @@
 <script>
 import { ipcRenderer } from 'electron';
 import { getCurrentWindow } from '@electron/remote';
-import { mapGetters } from 'vuex';
+import { useConnectionsStore } from '@/stores/connections';
+import { useWorkspacesStore } from '@/stores/workspaces';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'TheTitleBar',
+   setup () {
+      const { getConnectionName } = useConnectionsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace } = workspacesStore;
+
+      return {
+         getConnectionName,
+         selectedWorkspace,
+         getWorkspace
+      };
+   },
   data () {
      return {
         w: getCurrentWindow(),
@ -68,11 +84,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getConnectionName: 'connections/getConnectionName',
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      windowTitle () {
         if (!this.selectedWorkspace) return '';
         if (this.selectedWorkspace === 'NEW') return this.$t('message.createNewConnection');
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@ -469,9 +469,11 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { storeToRefs } from 'pinia';
 import Draggable from 'vuedraggable';
 import Connection from '@/ipc-api/Connection';
+import { useWorkspacesStore } from '@/stores/workspaces';
+
 import WorkspaceEmptyState from '@/components/WorkspaceEmptyState';
 import WorkspaceExploreBar from '@/components/WorkspaceExploreBar';
 import WorkspaceEditConnectionPanel from '@/components/WorkspaceEditConnectionPanel';
@ -525,6 +527,34 @@ export default {
   props: {
      connection: Object
   },
+   setup () {
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         addWorkspace,
+         connectWorkspace,
+         removeConnected,
+         selectTab,
+         newTab,
+         removeTab,
+         updateTabs
+      } = workspacesStore;
+
+      return {
+         selectedWorkspace,
+         getWorkspace,
+         addWorkspace,
+         connectWorkspace,
+         removeConnected,
+         selectTab,
+         newTab,
+         removeTab,
+         updateTabs
+      };
+   },
   data () {
      return {
         hasWheelEvent: false,
@ -533,10 +563,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -604,15 +630,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addWorkspace: 'workspaces/addWorkspace',
-         connectWorkspace: 'workspaces/connectWorkspace',
-         removeConnected: 'workspaces/removeConnected',
-         selectTab: 'workspaces/selectTab',
-         newTab: 'workspaces/newTab',
-         removeTab: 'workspaces/removeTab',
-         updateTabs: 'workspaces/updateTabs'
-      }),
      addQueryTab () {
         this.newTab({ uid: this.connection.uid, type: 'query' });
      },
--- a/src/renderer/components/WorkspaceAddConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceAddConnectionPanel.vue
@ -396,10 +396,12 @@
 </template>

 <script>
-import { mapActions } from 'vuex';
 import customizations from 'common/customizations';
 import Connection from '@/ipc-api/Connection';
 import { uidGen } from 'common/libs/uidGen';
+import { useConnectionsStore } from '@/stores/connections';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseUploadInput from '@/components/BaseUploadInput';

@ -409,6 +411,20 @@ export default {
      ModalAskCredentials,
      BaseUploadInput
   },
+   setup () {
+      const { addConnection } = useConnectionsStore();
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { connectWorkspace, selectWorkspace } = workspacesStore;
+
+      return {
+         addConnection,
+         addNotification,
+         connectWorkspace,
+         selectWorkspace
+      };
+   },
   data () {
      return {
         clients: [
@ -472,12 +488,6 @@ export default {
      }, 20);
   },
   methods: {
-      ...mapActions({
-         addConnection: 'connections/addConnection',
-         connectWorkspace: 'workspaces/connectWorkspace',
-         addNotification: 'notifications/addNotification',
-         selectWorkspace: 'workspaces/selectWorkspace'
-      }),
      setDefaults () {
         this.connection.user = this.customizations.defaultUser;
         this.connection.port = this.customizations.defaultPort;
--- a/src/renderer/components/WorkspaceEditConnectionPanel.vue
+++ b/src/renderer/components/WorkspaceEditConnectionPanel.vue
@ -394,8 +394,10 @@
 </template>

 <script>
-import { mapActions } from 'vuex';
 import customizations from 'common/customizations';
+import { useConnectionsStore } from '@/stores/connections';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Connection from '@/ipc-api/Connection';
 import ModalAskCredentials from '@/components/ModalAskCredentials';
 import BaseUploadInput from '@/components/BaseUploadInput';
@ -409,6 +411,17 @@ export default {
   props: {
      connection: Object
   },
+   setup () {
+      const { editConnection } = useConnectionsStore();
+      const { addNotification } = useNotificationsStore();
+      const { connectWorkspace } = useWorkspacesStore();
+
+      return {
+         editConnection,
+         addNotification,
+         connectWorkspace
+      };
+   },
   data () {
      return {
         clients: [
@ -444,11 +457,6 @@ export default {
      this.localConnection = JSON.parse(JSON.stringify(this.connection));
   },
   methods: {
-      ...mapActions({
-         editConnection: 'connections/editConnection',
-         connectWorkspace: 'workspaces/connectWorkspace',
-         addNotification: 'notifications/addNotification'
-      }),
      async startConnection () {
         await this.saveConnection();
         this.isConnecting = true;
--- a/src/renderer/components/WorkspaceEmptyState.vue
+++ b/src/renderer/components/WorkspaceEmptyState.vue
@ -25,27 +25,35 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkspacesStore } from '@/stores/workspaces';
+import { storeToRefs } from 'pinia';
 export default {
   name: 'WorkspaceEmptyState',
   emits: ['new-tab'],
+   setup () {
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { applicationTheme } = storeToRefs(settingsStore);
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, changeBreadcrumbs } = workspacesStore;
+
+      return {
+         applicationTheme,
+         selectedWorkspace,
+         getWorkspace,
+         changeBreadcrumbs
+      };
+   },
   computed: {
-      ...mapGetters({
-         applicationTheme: 'settings/getApplicationTheme',
-         getWorkspace: 'workspaces/getWorkspace',
-         selectedWorkspace: 'workspaces/getSelected'
-      }),
      workspace () {
         return this.getWorkspace(this.selectedWorkspace);
      }
   },
   created () {
      this.changeBreadcrumbs({ schema: this.workspace.breadcrumbs.schema });
-   },
-   methods: {
-      ...mapActions({
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      })
   }
 };
 </script>
--- a/src/renderer/components/WorkspaceExploreBar.vue
+++ b/src/renderer/components/WorkspaceExploreBar.vue
@ -115,7 +115,10 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useConnectionsStore } from '@/stores/connections';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkspacesStore } from '@/stores/workspaces';

 import Tables from '@/ipc-api/Tables';
 import Views from '@/ipc-api/Views';
@ -128,6 +131,7 @@ import TableContext from '@/components/WorkspaceExploreBarTableContext';
 import MiscContext from '@/components/WorkspaceExploreBarMiscContext';
 import MiscFolderContext from '@/components/WorkspaceExploreBarMiscFolderContext';
 import ModalNewSchema from '@/components/ModalNewSchema';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceExploreBar',
@ -143,6 +147,45 @@ export default {
      connection: Object,
      isSelected: Boolean
   },
+   setup () {
+      const { getConnectionName } = useConnectionsStore();
+      const { addNotification } = useNotificationsStore();
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { explorebarSize } = storeToRefs(settingsStore);
+
+      const { changeExplorebarSize } = settingsStore;
+      const {
+         getWorkspace,
+         disconnectWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         selectTab,
+         newTab,
+         removeTabs,
+         setSearchTerm,
+         addLoadingElement,
+         removeLoadingElement
+      } = workspacesStore;
+
+      return {
+         getConnectionName,
+         addNotification,
+         explorebarSize,
+         changeExplorebarSize,
+         getWorkspace,
+         disconnectWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         selectTab,
+         newTab,
+         removeTabs,
+         setSearchTerm,
+         addLoadingElement,
+         removeLoadingElement
+      };
+   },
   data () {
      return {
         isRefreshing: false,
@ -174,11 +217,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getWorkspace: 'workspaces/getWorkspace',
-         explorebarSize: 'settings/getExplorebarSize',
-         getConnectionName: 'connections/getConnectionName'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -222,19 +260,6 @@ export default {
      });
   },
   methods: {
-      ...mapActions({
-         disconnectWorkspace: 'workspaces/removeConnected',
-         refreshStructure: 'workspaces/refreshStructure',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         selectTab: 'workspaces/selectTab',
-         newTab: 'workspaces/newTab',
-         removeTabs: 'workspaces/removeTabs',
-         setSearchTerm: 'workspaces/setSearchTerm',
-         addNotification: 'notifications/addNotification',
-         changeExplorebarSize: 'settings/changeExplorebarSize',
-         addLoadingElement: 'workspaces/addLoadingElement',
-         removeLoadingElement: 'workspaces/removeLoadingElement'
-      }),
      async refresh () {
         if (!this.isRefreshing) {
            this.isRefreshing = true;
--- a/src/renderer/components/WorkspaceExploreBarMiscContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarMiscContext.vue
@ -65,7 +65,8 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import ModalAskParameters from '@/components/ModalAskParameters';
@ -73,6 +74,7 @@ import Triggers from '@/ipc-api/Triggers';
 import Routines from '@/ipc-api/Routines';
 import Functions from '@/ipc-api/Functions';
 import Schedulers from '@/ipc-api/Schedulers';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceExploreBarMiscContext',
@ -87,6 +89,32 @@ export default {
      selectedSchema: String
   },
   emits: ['close-context', 'reload'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         changeBreadcrumbs,
+         addLoadingElement,
+         removeLoadingElement,
+         removeTabs,
+         newTab
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         changeBreadcrumbs,
+         addLoadingElement,
+         removeLoadingElement,
+         removeTabs,
+         newTab
+      };
+   },
   data () {
      return {
         isDeleteModal: false,
@ -96,10 +124,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.selectedWorkspace);
      },
@ -123,14 +147,6 @@ export default {
      }
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         addLoadingElement: 'workspaces/addLoadingElement',
-         removeLoadingElement: 'workspaces/removeLoadingElement',
-         removeTabs: 'workspaces/removeTabs',
-         newTab: 'workspaces/newTab'
-      }),
      showDeleteModal () {
         this.isDeleteModal = true;
      },
--- a/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarMiscFolderContext.vue
@ -42,8 +42,10 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseContextMenu from '@/components/BaseContextMenu';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceExploreBarMiscContext',
@ -55,26 +57,40 @@ export default {
      selectedMisc: String,
      selectedSchema: String
   },
-   emits: ['open-create-trigger-tab', 'open-create-routine-tab', 'open-create-function-tab', 'open-create-trigger-function-tab', 'open-create-scheduler-tab', 'close-context'],
+   emits: [
+      'open-create-trigger-tab',
+      'open-create-routine-tab',
+      'open-create-function-tab',
+      'open-create-trigger-function-tab',
+      'open-create-scheduler-tab',
+      'close-context'
+   ],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace, changeBreadcrumbs } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         changeBreadcrumbs
+      };
+   },
   data () {
      return {
         localElement: {}
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.selectedWorkspace);
      }
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      }),
      showDeleteModal () {
         this.isDeleteModal = true;
      },
--- a/src/renderer/components/WorkspaceExploreBarSchema.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchema.vue
@ -243,8 +243,10 @@
 </template>

 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import { formatBytes } from 'common/libs/formatBytes';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceExploreBarSchema',
@ -252,19 +254,45 @@ export default {
      database: Object,
      connection: Object
   },
-   emits: ['show-schema-context', 'show-table-context', 'show-misc-context', 'show-misc-folder-context'],
+   emits: [
+      'show-schema-context',
+      'show-table-context',
+      'show-misc-context',
+      'show-misc-folder-context'
+   ],
+   setup () {
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { applicationTheme } = storeToRefs(settingsStore);
+
+      const {
+         getLoadedSchemas,
+         getWorkspace,
+         getSearchTerm,
+         changeBreadcrumbs,
+         addLoadedSchema,
+         newTab,
+         refreshSchema
+      } = workspacesStore;
+
+      return {
+         applicationTheme,
+         getLoadedSchemas,
+         getWorkspace,
+         getSearchTerm,
+         changeBreadcrumbs,
+         addLoadedSchema,
+         newTab,
+         refreshSchema
+      };
+   },
   data () {
      return {
         isLoading: false
      };
   },
   computed: {
-      ...mapGetters({
-         getLoadedSchemas: 'workspaces/getLoadedSchemas',
-         getWorkspace: 'workspaces/getWorkspace',
-         getSearchTerm: 'workspaces/getSearchTerm',
-         applicationTheme: 'settings/getApplicationTheme'
-      }),
      searchTerm () {
         return this.getSearchTerm(this.connection.uid);
      },
@ -332,12 +360,6 @@ export default {
      }
   },
   methods: {
-      ...mapActions({
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         addLoadedSchema: 'workspaces/addLoadedSchema',
-         newTab: 'workspaces/newTab',
-         refreshSchema: 'workspaces/refreshSchema'
-      }),
      formatBytes,
      async selectSchema (schema) {
         if (!this.loadedSchemas.has(schema) && !this.isLoading) {
--- a/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarSchemaContext.vue
@ -124,7 +124,8 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import ModalEditSchema from '@/components/ModalEditSchema';
@ -132,6 +133,7 @@ import ModalExportSchema from '@/components/ModalExportSchema';
 import ModalImportSchema from '@/components/ModalImportSchema';
 import Schema from '@/ipc-api/Schema';
 import Application from '@/ipc-api/Application';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceExploreBarSchemaContext',
@ -157,6 +159,24 @@ export default {
      'close-context',
      'reload'
   ],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         changeBreadcrumbs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         changeBreadcrumbs
+      };
+   },
   data () {
      return {
         isDeleteModal: false,
@ -166,19 +186,11 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.selectedWorkspace);
      }
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      }),
      openCreateTableTab () {
         this.$emit('open-create-table-tab');
      },
--- a/src/renderer/components/WorkspaceExploreBarTableContext.vue
+++ b/src/renderer/components/WorkspaceExploreBarTableContext.vue
@ -72,10 +72,12 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseContextMenu from '@/components/BaseContextMenu';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import Tables from '@/ipc-api/Tables';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceExploreBarTableContext',
@ -89,6 +91,32 @@ export default {
      selectedSchema: String
   },
   emits: ['close-context', 'duplicate-table', 'reload', 'delete-table'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         newTab,
+         removeTabs,
+         addLoadingElement,
+         removeLoadingElement,
+         changeBreadcrumbs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         getWorkspace,
+         newTab,
+         removeTabs,
+         addLoadingElement,
+         removeLoadingElement,
+         changeBreadcrumbs,
+         selectedWorkspace
+      };
+   },
   data () {
      return {
         isDeleteModal: false,
@ -96,10 +124,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.selectedWorkspace);
      },
@ -108,14 +132,6 @@ export default {
      }
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         newTab: 'workspaces/newTab',
-         removeTabs: 'workspaces/removeTabs',
-         addLoadingElement: 'workspaces/addLoadingElement',
-         removeLoadingElement: 'workspaces/removeLoadingElement',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      }),
      showDeleteModal () {
         this.isDeleteModal = true;
      },
--- a/src/renderer/components/WorkspaceTabNewFunction.vue
+++ b/src/renderer/components/WorkspaceTabNewFunction.vue
@ -203,11 +203,13 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal';
 import Functions from '@/ipc-api/Functions';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabNewFunction',
@ -222,6 +224,34 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -235,10 +265,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -309,15 +335,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         newTab: 'workspaces/newTab',
-         removeTab: 'workspaces/removeTab',
-         renameTabs: 'workspaces/renameTabs'
-      }),
      async saveChanges () {
         if (this.isSaving) return;
         this.isSaving = true;
--- a/src/renderer/components/WorkspaceTabNewRoutine.vue
+++ b/src/renderer/components/WorkspaceTabNewRoutine.vue
@ -163,11 +163,13 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import QueryEditor from '@/components/QueryEditor';
 import BaseLoader from '@/components/BaseLoader';
 import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal';
 import Routines from '@/ipc-api/Routines';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabNewRoutine',
@ -182,6 +184,34 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -195,10 +225,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -268,15 +294,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         newTab: 'workspaces/newTab',
-         removeTab: 'workspaces/removeTab',
-         renameTabs: 'workspaces/renameTabs'
-      }),
      async saveChanges () {
         if (this.isSaving) return;
         this.isSaving = true;
--- a/src/renderer/components/WorkspaceTabNewScheduler.vue
+++ b/src/renderer/components/WorkspaceTabNewScheduler.vue
@ -142,7 +142,8 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal';
@ -161,6 +162,34 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -174,10 +203,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -244,15 +269,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         newTab: 'workspaces/newTab',
-         removeTab: 'workspaces/removeTab',
-         renameTabs: 'workspaces/renameTabs'
-      }),
      async saveChanges () {
         if (this.isSaving) return;
         this.isSaving = true;
--- a/src/renderer/components/WorkspaceTabNewTable.vue
+++ b/src/renderer/components/WorkspaceTabNewTable.vue
@ -165,7 +165,8 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
 import BaseLoader from '@/components/BaseLoader';
@ -173,6 +174,7 @@ import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFie
 import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal';
 import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal';
 import WorkspaceTabNewTableEmptyState from '@/components/WorkspaceTabNewTableEmptyState';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabNewTable',
@ -189,6 +191,36 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         getDatabaseVariable,
+         refreshStructure,
+         setUnsavedChanges,
+         newTab,
+         renameTabs,
+         removeTab,
+         changeBreadcrumbs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         getWorkspace,
+         getDatabaseVariable,
+         refreshStructure,
+         setUnsavedChanges,
+         newTab,
+         renameTabs,
+         removeTab,
+         changeBreadcrumbs,
+         selectedWorkspace
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -209,11 +241,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getWorkspace: 'workspaces/getWorkspace',
-         selectedWorkspace: 'workspaces/getSelected',
-         getDatabaseVariable: 'workspaces/getDatabaseVariable'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -280,15 +307,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         newTab: 'workspaces/newTab',
-         renameTabs: 'workspaces/renameTabs',
-         removeTab: 'workspaces/removeTab',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      }),
      async saveChanges () {
         if (this.isSaving || !this.isValid) return;
         this.isSaving = true;
--- a/src/renderer/components/WorkspaceTabNewTrigger.vue
+++ b/src/renderer/components/WorkspaceTabNewTrigger.vue
@ -132,10 +132,12 @@
 </template>

 <script>
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import QueryEditor from '@/components/QueryEditor';
-import { mapGetters, mapActions } from 'vuex';
 import BaseLoader from '@/components/BaseLoader';
 import Triggers from '@/ipc-api/Triggers';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabNewTrigger',
@ -149,6 +151,34 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -162,10 +192,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -233,15 +259,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         newTab: 'workspaces/newTab',
-         removeTab: 'workspaces/removeTab',
-         renameTabs: 'workspaces/renameTabs'
-      }),
      changeEvents (event) {
         if (this.customizations.triggerMultipleEvents) {
            this.localEvents[event] = !this.localEvents[event];
--- a/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
+++ b/src/renderer/components/WorkspaceTabNewTriggerFunction.vue
@ -108,10 +108,12 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import Functions from '@/ipc-api/Functions';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabNewTriggerFunction',
@ -125,6 +127,34 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         changeBreadcrumbs,
+         setUnsavedChanges,
+         newTab,
+         removeTab,
+         renameTabs
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -139,10 +169,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -209,15 +235,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         newTab: 'workspaces/newTab',
-         removeTab: 'workspaces/removeTab',
-         renameTabs: 'workspaces/renameTabs'
-      }),
      async saveChanges () {
         if (this.isSaving) return;
         this.isSaving = true;
--- a/src/renderer/components/WorkspaceTabNewView.vue
+++ b/src/renderer/components/WorkspaceTabNewView.vue
@ -121,10 +121,12 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import Views from '@/ipc-api/Views';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabNewView',
@ -138,6 +140,34 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         setUnsavedChanges,
+         changeBreadcrumbs,
+         newTab,
+         removeTab,
+         renameTabs
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         setUnsavedChanges,
+         changeBreadcrumbs,
+         newTab,
+         removeTab,
+         renameTabs
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -150,10 +180,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -216,15 +242,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         newTab: 'workspaces/newTab',
-         removeTab: 'workspaces/removeTab',
-         renameTabs: 'workspaces/renameTabs'
-      }),
      async saveChanges () {
         if (this.isSaving) return;
         this.isSaving = true;
--- a/src/renderer/components/WorkspaceTabPropsFunction.vue
+++ b/src/renderer/components/WorkspaceTabPropsFunction.vue
@ -222,13 +222,15 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import { uidGen } from 'common/libs/uidGen';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceTabPropsFunctionParamsModal from '@/components/WorkspaceTabPropsFunctionParamsModal';
 import ModalAskParameters from '@/components/ModalAskParameters';
 import Functions from '@/ipc-api/Functions';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsFunction',
@ -244,6 +246,32 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -258,10 +286,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -346,14 +370,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         renameTabs: 'workspaces/renameTabs',
-         newTab: 'workspaces/newTab',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges'
-      }),
      async getFunctionData () {
         if (!this.function) return;

--- a/src/renderer/components/WorkspaceTabPropsRoutine.vue
+++ b/src/renderer/components/WorkspaceTabPropsRoutine.vue
@ -179,13 +179,15 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import { uidGen } from 'common/libs/uidGen';
 import QueryEditor from '@/components/QueryEditor';
 import BaseLoader from '@/components/BaseLoader';
 import WorkspaceTabPropsRoutineParamsModal from '@/components/WorkspaceTabPropsRoutineParamsModal';
 import ModalAskParameters from '@/components/ModalAskParameters';
 import Routines from '@/ipc-api/Routines';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsRoutine',
@ -201,6 +203,32 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -215,10 +243,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -291,14 +315,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         renameTabs: 'workspaces/renameTabs',
-         newTab: 'workspaces/newTab',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges'
-      }),
      async getRoutineData () {
         if (!this.routine) return;

--- a/src/renderer/components/WorkspaceTabPropsScheduler.vue
+++ b/src/renderer/components/WorkspaceTabPropsScheduler.vue
@ -141,11 +141,13 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import WorkspaceTabPropsSchedulerTimingModal from '@/components/WorkspaceTabPropsSchedulerTimingModal';
 import Schedulers from '@/ipc-api/Schedulers';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsScheduler',
@ -160,6 +162,32 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -173,10 +201,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -243,14 +267,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         renameTabs: 'workspaces/renameTabs',
-         newTab: 'workspaces/newTab',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges'
-      }),
      async getSchedulerData () {
         if (!this.scheduler) return;

--- a/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsSchedulerTimingModal.vue
@ -139,7 +139,6 @@

 <script>
 import ConfirmModal from '@/components/BaseConfirmModal';
-import { VueMaskDirective } from 'v-mask';
 import moment from 'moment';

 export default {
@ -147,9 +146,6 @@ export default {
   components: {
      ConfirmModal
   },
-   directives: {
-      mask: VueMaskDirective
-   },
   props: {
      localOptions: Object,
      workspace: Object
--- a/src/renderer/components/WorkspaceTabPropsTable.vue
+++ b/src/renderer/components/WorkspaceTabPropsTable.vue
@ -177,13 +177,15 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
 import BaseLoader from '@/components/BaseLoader';
 import WorkspaceTabPropsTableFields from '@/components/WorkspaceTabPropsTableFields';
 import WorkspaceTabPropsTableIndexesModal from '@/components/WorkspaceTabPropsTableIndexesModal';
 import WorkspaceTabPropsTableForeignModal from '@/components/WorkspaceTabPropsTableForeignModal';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsTable',
@ -199,6 +201,32 @@ export default {
      table: String,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         getDatabaseVariable,
+         refreshStructure,
+         renameTabs,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         getDatabaseVariable,
+         getWorkspace,
+         selectedWorkspace,
+         refreshStructure,
+         setUnsavedChanges,
+         renameTabs,
+         changeBreadcrumbs
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -219,11 +247,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getWorkspace: 'workspaces/getWorkspace',
-         selectedWorkspace: 'workspaces/getSelected',
-         getDatabaseVariable: 'workspaces/getDatabaseVariable'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -281,13 +304,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         renameTabs: 'workspaces/renameTabs',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      }),
      async getTableOptions (params) {
         const db = this.workspace.structure.find(db => db.name === this.schema);

--- a/src/renderer/components/WorkspaceTabPropsTableFields.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableFields.vue
@ -125,10 +125,12 @@
 </template>

 <script>
-import { mapActions, mapGetters } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Draggable from 'vuedraggable';
 import TableRow from '@/components/WorkspaceTabPropsTableRow';
 import TableContext from '@/components/WorkspaceTabPropsTableContext';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsTableFields',
@ -149,6 +151,20 @@ export default {
      mode: String
   },
   emits: ['add-new-index', 'add-to-index', 'rename-field', 'duplicate-field', 'remove-field'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace
+      };
+   },
   data () {
      return {
         resultsSize: 1000,
@ -159,10 +175,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getWorkspaceTab: 'workspaces/getWorkspaceTab',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspaceSchema () {
         return this.getWorkspace(this.connUid).breadcrumbs.schema;
      },
@ -201,9 +213,6 @@ export default {
      window.removeEventListener('resize', this.resizeResults);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      resizeResults () {
         if (this.$refs.resultTable) {
            const el = this.$refs.tableWrapper;
--- a/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableForeignModal.vue
@ -202,7 +202,7 @@
 </template>

 <script>
-import { mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
 import { uidGen } from 'common/libs/uidGen';
 import Tables from '@/ipc-api/Tables';
 import ConfirmModal from '@/components/BaseConfirmModal';
@ -222,6 +222,11 @@ export default {
      workspace: Object
   },
   emits: ['foreigns-update', 'hide'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+
+      return { addNotification };
+   },
   data () {
      return {
         foreignProxy: [],
@ -264,9 +269,6 @@ export default {
      window.removeEventListener('resize', this.getModalInnerHeight);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      confirmForeignsChange () {
         this.foreignProxy = this.foreignProxy.filter(foreign =>
            foreign.field &&
--- a/src/renderer/components/WorkspaceTabPropsTableRow.vue
+++ b/src/renderer/components/WorkspaceTabPropsTableRow.vue
@ -343,8 +343,9 @@
 </template>

 <script>
-import { mapGetters } from 'vuex';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import ConfirmModal from '@/components/BaseConfirmModal';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsTableRow',
@ -359,6 +360,20 @@ export default {
      customizations: Object
   },
   emits: ['contextmenu', 'rename-field'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { getWorkspace } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace
+      };
+   },
   data () {
      return {
         localRow: {},
@ -376,10 +391,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      localLength () {
         const localLength = this.localRow.numLength || this.localRow.charLength || this.localRow.datePrecision || this.localRow.numPrecision || 0;
         return localLength === true ? null : localLength;
--- a/src/renderer/components/WorkspaceTabPropsTrigger.vue
+++ b/src/renderer/components/WorkspaceTabPropsTrigger.vue
@ -131,10 +131,12 @@
 </template>

 <script>
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import QueryEditor from '@/components/QueryEditor';
-import { mapGetters, mapActions } from 'vuex';
 import BaseLoader from '@/components/BaseLoader';
 import Triggers from '@/ipc-api/Triggers';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsTrigger',
@ -148,6 +150,32 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -161,10 +189,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -234,14 +258,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         renameTabs: 'workspaces/renameTabs',
-         newTab: 'workspaces/newTab',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges'
-      }),
      async getTriggerData () {
         if (!this.trigger) return;

--- a/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
+++ b/src/renderer/components/WorkspaceTabPropsTriggerFunction.vue
@ -102,12 +102,14 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import { uidGen } from 'common/libs/uidGen';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import ModalAskParameters from '@/components/ModalAskParameters';
 import Functions from '@/ipc-api/Functions';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsTriggerFunction',
@ -122,6 +124,32 @@ export default {
      isSelected: Boolean,
      schema: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         newTab,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -136,10 +164,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -211,14 +235,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         renameTabs: 'workspaces/renameTabs',
-         newTab: 'workspaces/newTab',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges'
-      }),
      async getFunctionData () {
         if (!this.function) return;

--- a/src/renderer/components/WorkspaceTabPropsView.vue
+++ b/src/renderer/components/WorkspaceTabPropsView.vue
@ -120,10 +120,12 @@
 </template>

 <script>
-import { mapGetters, mapActions } from 'vuex';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import QueryEditor from '@/components/QueryEditor';
 import Views from '@/ipc-api/Views';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabPropsView',
@ -137,6 +139,30 @@ export default {
      schema: String,
      view: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      } = workspacesStore;
+
+      return {
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         refreshStructure,
+         renameTabs,
+         changeBreadcrumbs,
+         setUnsavedChanges
+      };
+   },
   data () {
      return {
         isLoading: false,
@ -149,10 +175,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         selectedWorkspace: 'workspaces/getSelected',
-         getWorkspace: 'workspaces/getWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -212,13 +234,6 @@ export default {
      window.removeEventListener('keydown', this.onKey);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         refreshStructure: 'workspaces/refreshStructure',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         renameTabs: 'workspaces/renameTabs'
-      }),
      async getViewData () {
         if (!this.view) return;
         this.isLoading = true;
--- a/src/renderer/components/WorkspaceTabQuery.vue
+++ b/src/renderer/components/WorkspaceTabQuery.vue
@ -188,7 +188,9 @@

 <script>
 import { format } from 'sql-formatter';
-import { mapGetters, mapActions } from 'vuex';
+import { useHistoryStore } from '@/stores/history';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import Schema from '@/ipc-api/Schema';
 import QueryEditor from '@/components/QueryEditor';
 import BaseLoader from '@/components/BaseLoader';
@ -196,6 +198,7 @@ import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable';
 import WorkspaceTabQueryEmptyState from '@/components/WorkspaceTabQueryEmptyState';
 import ModalHistory from '@/components/ModalHistory';
 import tableTabs from '@/mixins/tableTabs';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabQuery',
@ -212,6 +215,31 @@ export default {
      tab: Object,
      isSelected: Boolean
   },
+   setup () {
+      const { getHistoryByWorkspace, saveHistory } = useHistoryStore();
+      const { addNotification } = useNotificationsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const {
+         getWorkspace,
+         changeBreadcrumbs,
+         updateTabContent,
+         setUnsavedChanges
+      } = workspacesStore;
+
+      return {
+         getHistoryByWorkspace,
+         saveHistory,
+         addNotification,
+         selectedWorkspace,
+         getWorkspace,
+         changeBreadcrumbs,
+         updateTabContent,
+         setUnsavedChanges
+      };
+   },
   data () {
      return {
         query: '',
@ -230,11 +258,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getWorkspace: 'workspaces/getWorkspace',
-         selectedWorkspace: 'workspaces/getSelected',
-         getHistoryByWorkspace: 'history/getHistoryByWorkspace'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -305,13 +328,6 @@ export default {
      Schema.destroyConnectionToCommit(params);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs',
-         updateTabContent: 'workspaces/updateTabContent',
-         setUnsavedChanges: 'workspaces/setUnsavedChanges',
-         saveHistory: 'history/saveHistory'
-      }),
      async runQuery (query) {
         if (!query || this.isQuering) return;
         this.isQuering = true;
--- a/src/renderer/components/WorkspaceTabQueryTable.vue
+++ b/src/renderer/components/WorkspaceTabQueryTable.vue
@ -108,14 +108,17 @@

 <script>
 import { uidGen } from 'common/libs/uidGen';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import arrayToFile from '../libs/arrayToFile';
 import { TEXT, LONG_TEXT, BLOB } from 'common/fieldTypes';
 import BaseVirtualScroll from '@/components/BaseVirtualScroll';
 import WorkspaceTabQueryTableRow from '@/components/WorkspaceTabQueryTableRow';
 import TableContext from '@/components/WorkspaceTabQueryTableContext';
 import ConfirmModal from '@/components/BaseConfirmModal';
-import { mapActions, mapGetters } from 'vuex';
 import moment from 'moment';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabQueryTable',
@ -133,6 +136,19 @@ export default {
      elementType: { type: String, default: 'table' }
   },
   emits: ['update-field', 'delete-selected', 'hard-sort'],
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const settingsStore = useSettingsStore();
+      const { getWorkspace } = useWorkspacesStore();
+
+      const { dataTabLimit: pageSize } = storeToRefs(settingsStore);
+
+      return {
+         addNotification,
+         pageSize,
+         getWorkspace
+      };
+   },
   data () {
      return {
         resultsSize: 0,
@ -150,10 +166,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getWorkspace: 'workspaces/getWorkspace',
-         pageSize: 'settings/getDataTabLimit'
-      }),
      workspaceSchema () {
         return this.getWorkspace(this.connUid).breadcrumbs.schema;
      },
@ -261,9 +273,6 @@ export default {
      window.removeEventListener('resize', this.resizeResults);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification'
-      }),
      fieldType (cKey) {
         let type = 'unknown';
         const field = this.fields.filter(field => field.name === cKey)[0];
--- a/src/renderer/components/WorkspaceTabQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceTabQueryTableRow.vue
@ -219,7 +219,6 @@ import {
   SPATIAL,
   IS_MULTI_SPATIAL
 } from 'common/fieldTypes';
-import { VueMaskDirective } from 'v-mask';
 import ConfirmModal from '@/components/BaseConfirmModal';
 import TextEditor from '@/components/BaseTextEditor';
 import BaseMap from '@/components/BaseMap';
@ -233,9 +232,6 @@ export default {
      ForeignKeySelect,
      BaseMap
   },
-   directives: {
-      mask: VueMaskDirective
-   },
   props: {
      row: Object,
      fields: Object,
--- a/src/renderer/components/WorkspaceTabTable.vue
+++ b/src/renderer/components/WorkspaceTabTable.vue
@ -177,13 +177,16 @@

 <script>
 import Tables from '@/ipc-api/Tables';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useSettingsStore } from '@/stores/settings';
+import { useWorkspacesStore } from '@/stores/workspaces';
 import BaseLoader from '@/components/BaseLoader';
 import WorkspaceTabQueryTable from '@/components/WorkspaceTabQueryTable';
 import WorkspaceTabTableFilters from '@/components/WorkspaceTabTableFilters';
 import ModalNewTableRow from '@/components/ModalNewTableRow';
 import ModalFakerRows from '@/components/ModalFakerRows';
-import { mapGetters, mapActions } from 'vuex';
 import tableTabs from '@/mixins/tableTabs';
+import { storeToRefs } from 'pinia';

 export default {
   name: 'WorkspaceTabTable',
@ -202,6 +205,24 @@ export default {
      schema: String,
      elementType: String
   },
+   setup () {
+      const { addNotification } = useNotificationsStore();
+      const settingsStore = useSettingsStore();
+      const workspacesStore = useWorkspacesStore();
+
+      const { dataTabLimit: limit } = storeToRefs(settingsStore);
+      const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
+
+      const { changeBreadcrumbs, getWorkspace } = workspacesStore;
+
+      return {
+         addNotification,
+         limit,
+         selectedWorkspace,
+         changeBreadcrumbs,
+         getWorkspace
+      };
+   },
   data () {
      return {
         tabUid: 'data', // ???
@ -222,11 +243,6 @@ export default {
      };
   },
   computed: {
-      ...mapGetters({
-         getWorkspace: 'workspaces/getWorkspace',
-         selectedWorkspace: 'workspaces/getSelected',
-         limit: 'settings/getDataTabLimit'
-      }),
      workspace () {
         return this.getWorkspace(this.connection.uid);
      },
@ -309,10 +325,6 @@ export default {
      clearInterval(this.refreshInterval);
   },
   methods: {
-      ...mapActions({
-         addNotification: 'notifications/addNotification',
-         changeBreadcrumbs: 'workspaces/changeBreadcrumbs'
-      }),
      async getTableData () {
         if (!this.table || !this.isSelected) return;
         this.isQuering = true;
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@ -1,12 +1,12 @@
 'use strict';
-
 import { createApp, configureCompat } from 'vue';
 import '@mdi/font/css/materialdesignicons.css';
 import 'leaflet/dist/leaflet.css';
 import '@/scss/main.scss';
+import { VueMaskDirective } from 'v-mask';
+import { useSettingsStore } from '@/stores/settings';

 import App from '@/App.vue';
-import { store } from '@/store';
 import { pinia } from '@/stores';
 import i18n from '@/i18n';

@ -15,10 +15,19 @@ configureCompat({
   MODE: 3
 });

-i18n.global.locale = store.state.settings.locale;
+// https://github.com/probil/v-mask/issues/498#issuecomment-827027834
+const vMaskV2 = VueMaskDirective;
+const vMaskV3 = {
+   beforeMount: vMaskV2.bind,
+   updated: vMaskV2.componentUpdated,
+   unmounted: vMaskV2.unbind
+};

 createApp(App)
-   .use(store)
+   .directive('mask', vMaskV3)
   .use(pinia)
   .use(i18n)
   .mount('#app');
+
+const { locale } = useSettingsStore();
+i18n.global.locale = locale;
--- a/src/renderer/store/index.js
+++ b/src/renderer/store/index.js
@ -1,32 +0,0 @@
-'use strict';
-import { createStore } from 'vuex/dist/vuex.esm-bundler';
-
-import application from './modules/application.store';
-import settings from './modules/settings.store';
-import history from './modules/history.store';
-import scratchpad from './modules/scratchpad.store';
-import connections from './modules/connections.store';
-import workspaces from './modules/workspaces.store';
-import notifications from './modules/notifications.store';
-
-import ipcUpdates from './plugins/ipcUpdates';
-import ipcExceptions from './plugins/ipcExceptions';
-import ipcShortcuts from './plugins/ipcShortcuts';
-
-export const store = createStore({
-   strict: true,
-   modules: {
-      application,
-      settings,
-      history,
-      scratchpad,
-      connections,
-      workspaces,
-      notifications
-   },
-   plugins: [
-      ipcUpdates,
-      ipcExceptions,
-      ipcShortcuts
-   ]
-});
--- a/src/renderer/store/modules/application.store.js
+++ b/src/renderer/store/modules/application.store.js
@ -1,106 +0,0 @@
-'use strict';
-import Store from 'electron-store';
-const persistentStore = new Store({ name: 'settings' });
-
-export default {
-   namespaced: true,
-   strict: true,
-   state: {
-      app_name: 'Antares - SQL Client',
-      app_version: process.env.PACKAGE_VERSION || 0,
-      cached_version: persistentStore.get('cached_version', 0),
-      is_loading: false,
-      is_new_modal: false,
-      is_setting_modal: false,
-      is_scratchpad: false,
-      selected_setting_tab: 'general',
-      selected_conection: {},
-      update_status: 'noupdate', // noupdate, available, checking, nocheck, downloading, downloaded, disabled
-      download_progress: 0,
-      base_completer: [] // Needed to reset ace editor, due global-only ace completer
-   },
-   getters: {
-      isLoading: state => state.is_loading,
-      appName: state => state.app_name,
-      appVersion: state => state.app_version,
-      cachedVersion: state => state.cached_version,
-      getBaseCompleter: state => state.base_completer,
-      getSelectedConnection: state => state.selected_conection,
-      isNewModal: state => state.is_new_modal,
-      isSettingModal: state => state.is_setting_modal,
-      isScratchpad: state => state.is_scratchpad,
-      selectedSettingTab: state => state.selected_setting_tab,
-      getUpdateStatus: state => state.update_status,
-      getDownloadProgress: state => Number(state.download_progress.toFixed(1))
-   },
-   mutations: {
-      SET_LOADING_STATUS (state, payload) {
-         state.is_loading = payload;
-      },
-      SET_BASE_COMPLETER (state, payload) {
-         state.base_completer = payload;
-      },
-      SHOW_NEW_CONNECTION_MODAL (state) {
-         state.is_new_modal = true;
-      },
-      HIDE_NEW_CONNECTION_MODAL (state) {
-         state.is_new_modal = false;
-      },
-      SHOW_SETTING_MODAL (state, tab) {
-         state.selected_setting_tab = tab;
-         state.is_setting_modal = true;
-      },
-      HIDE_SETTING_MODAL (state) {
-         state.is_setting_modal = false;
-      },
-      SHOW_SCRATCHPAD (state) {
-         state.is_scratchpad = true;
-      },
-      HIDE_SCRATCHPAD (state) {
-         state.is_scratchpad = false;
-      },
-      CHANGE_CACHED_VERSION (state) {
-         state.cached_version = state.app_version;
-         persistentStore.set('cached_version', state.cached_version);
-      },
-      CHANGE_UPDATE_STATUS (state, status) {
-         state.update_status = status;
-      },
-      CHANGE_PROGRESS_PERCENTAGE (state, percentage) {
-         state.download_progress = percentage;
-      }
-   },
-   actions: {
-      checkVersionUpdate ({ getters, commit, dispatch }) {
-         if (getters.appVersion !== getters.cachedVersion) {
-            dispatch('showSettingModal', 'changelog');
-            commit('CHANGE_CACHED_VERSION');
-         }
-      },
-      setLoadingStatus ({ commit }, payload) {
-         commit('SET_LOADING_STATUS', payload);
-      },
-      setBaseCompleter ({ commit }, payload) {
-         commit('SET_BASE_COMPLETER', payload);
-      },
-      // Modals
-      showNewConnModal ({ commit }) {
-         commit('SHOW_NEW_CONNECTION_MODAL');
-      },
-      hideNewConnModal ({ commit }) {
-         commit('HIDE_NEW_CONNECTION_MODAL');
-      },
-      showSettingModal ({ commit }, tab) {
-         commit('SHOW_SETTING_MODAL', tab);
-      },
-      hideSettingModal ({ commit }) {
-         commit('HIDE_SETTING_MODAL');
-      },
-      showScratchpad ({ commit }) {
-         commit('SHOW_SCRATCHPAD');
-      },
-      hideScratchpad ({ commit }) {
-         commit('HIDE_SCRATCHPAD');
-      }
-   }
-};
--- a/src/renderer/store/modules/connections.store.js
+++ b/src/renderer/store/modules/connections.store.js
@ -1,84 +0,0 @@
-'use strict';
-import Store from 'electron-store';
-import crypto from 'crypto';
-const key = localStorage.getItem('key');
-
-if (!key)
-   localStorage.setItem('key', crypto.randomBytes(16).toString('hex'));
-else
-   localStorage.setItem('key', key);
-
-const persistentStore = new Store({
-   name: 'connections',
-   encryptionKey: key,
-   clearInvalidConfig: true
-});
-
-export default {
-   namespaced: true,
-   strict: true,
-   state: {
-      connections: persistentStore.get('connections', [])
-   },
-   getters: {
-      getConnections: state => state.connections,
-      getConnectionName: state => uid => {
-         const connection = state.connections.filter(connection => connection.uid === uid)[0];
-         let connectionName = '';
-
-         if (connection.name)
-            connectionName = connection.name;
-         else if (connection.ask)
-            connectionName = `${connection.host}:${connection.port}`;
-         else if (connection.databasePath) {
-            let string = connection.databasePath.split(/[/\\]+/).pop();
-
-            if (string.length >= 30)
-               string = `...${string.slice(-30)}`;
-
-            connectionName = string;
-         }
-         else
-            connectionName = `${connection.user + '@'}${connection.host}:${connection.port}`;
-
-         return connectionName;
-      }
-   },
-   mutations: {
-      ADD_CONNECTION (state, connection) {
-         state.connections.push(connection);
-         persistentStore.set('connections', state.connections);
-      },
-      DELETE_CONNECTION (state, connection) {
-         state.connections = state.connections.filter(el => el.uid !== connection.uid);
-         persistentStore.set('connections', state.connections);
-      },
-      EDIT_CONNECTION (state, connection) {
-         const editedConnections = state.connections.map(conn => {
-            if (conn.uid === connection.uid) return connection;
-            return conn;
-         });
-         state.connections = editedConnections;
-         state.selected_conection = {};
-         persistentStore.set('connections', state.connections);
-      },
-      UPDATE_CONNECTIONS (state, connections) {
-         state.connections = connections;
-         persistentStore.set('connections', state.connections);
-      }
-   },
-   actions: {
-      addConnection ({ commit }, connection) {
-         commit('ADD_CONNECTION', connection);
-      },
-      deleteConnection ({ commit }, connection) {
-         commit('DELETE_CONNECTION', connection);
-      },
-      editConnection ({ commit }, connection) {
-         commit('EDIT_CONNECTION', connection);
-      },
-      updateConnections ({ commit }, connections) {
-         commit('UPDATE_CONNECTIONS', connections);
-      }
-   }
-};
--- a/src/renderer/store/modules/history.store.js
+++ b/src/renderer/store/modules/history.store.js
@ -1,54 +0,0 @@
-'use strict';
-import Store from 'electron-store';
-import { uidGen } from 'common/libs/uidGen';
-const persistentStore = new Store({ name: 'history' });
-const historySize = 1000;
-
-export default {
-   namespaced: true,
-   strict: true,
-   state: {
-      history: persistentStore.get('history', {}),
-      favorites: persistentStore.get('favorites', {})
-   },
-   getters: {
-      getHistoryByWorkspace: state => uid => state.history[uid]
-   },
-   mutations: {
-      SET_HISTORY (state, args) {
-         if (!(args.uid in state.history))
-            state.history[args.uid] = [];
-
-         state.history[args.uid] = [
-            {
-               uid: uidGen('H'),
-               sql: args.query,
-               date: new Date(),
-               schema: args.schema
-            },
-            ...state.history[args.uid]
-         ];
-
-         if (state.history[args.uid].length > historySize)
-            state.history[args.uid] = state.history[args.uid].slice(0, historySize);
-
-         persistentStore.set('history', state.history);
-      },
-      DELETE_QUERY_FROM_HISTORY (state, query) {
-         state.history[query.workspace] = state.history[query.workspace].filter(q => q.uid !== query.uid);
-         persistentStore.set('history', state.history);
-      }
-   },
-   actions: {
-      saveHistory ({ commit, getters }, args) {
-         if (getters.getHistoryByWorkspace(args.uid) &&
-            getters.getHistoryByWorkspace(args.uid).length &&
-            getters.getHistoryByWorkspace(args.uid)[0].sql === args.query
-         ) return;
-         commit('SET_HISTORY', args);
-      },
-      deleteQueryFromHistory ({ commit }, query) {
-         commit('DELETE_QUERY_FROM_HISTORY', query);
-      }
-   }
-};
--- a/src/renderer/store/modules/notifications.store.js
+++ b/src/renderer/store/modules/notifications.store.js
@ -1,30 +0,0 @@
-'use strict';
-import { uidGen } from 'common/libs/uidGen';
-
-export default {
-   namespaced: true,
-   strict: true,
-   state: {
-      notifications: []
-   },
-   getters: {
-      getNotifications: state => state.notifications
-   },
-   mutations: {
-      ADD_NOTIFICATION (state, payload) {
-         state.notifications.unshift(payload);
-      },
-      REMOVE_NOTIFICATION (state, uid) {
-         state.notifications = state.notifications.filter(item => item.uid !== uid);
-      }
-   },
-   actions: {
-      addNotification ({ commit }, payload) {
-         payload.uid = uidGen('N');
-         commit('ADD_NOTIFICATION', payload);
-      },
-      removeNotification ({ commit }, uid) {
-         commit('REMOVE_NOTIFICATION', uid);
-      }
-   }
-};
--- a/src/renderer/store/modules/settings.store.js
+++ b/src/renderer/store/modules/settings.store.js
@ -1,129 +0,0 @@
-'use strict';
-import i18n from '@/i18n';
-import Store from 'electron-store';
-const persistentStore = new Store({ name: 'settings' });
-const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
-const defaultAppTheme = isDarkTheme.matches ? 'dark' : 'light';
-const defaultEditorTheme = isDarkTheme.matches ? 'twilight' : 'sqlserver';
-
-export default {
-   namespaced: true,
-   strict: true,
-   state: {
-      locale: persistentStore.get('locale', 'en-US'),
-      allow_prerelease: persistentStore.get('allow_prerelease', true),
-      explorebar_size: persistentStore.get('explorebar_size', null),
-      notifications_timeout: persistentStore.get('notifications_timeout', 5),
-      data_tab_limit: persistentStore.get('data_tab_limit', 1000),
-      auto_complete: persistentStore.get('auto_complete', true),
-      line_wrap: persistentStore.get('line_wrap', true),
-      application_theme: persistentStore.get('application_theme', defaultAppTheme),
-      editor_theme: persistentStore.get('editor_theme', defaultEditorTheme),
-      editor_font_size: persistentStore.get('editor_font_size', 'medium'),
-      restore_tabs: persistentStore.get('restore_tabs', true),
-      disable_blur: persistentStore.get('disable_blur', false)
-   },
-   getters: {
-      getLocale: state => state.locale,
-      getDataTabLimit: state => state.data_tab_limit,
-      getAllowPrerelease: state => state.allow_prerelease,
-      getExplorebarSize: state => state.explorebar_size,
-      getNotificationsTimeout: state => state.notifications_timeout,
-      getAutoComplete: state => state.auto_complete,
-      getLineWrap: state => state.line_wrap,
-      getApplicationTheme: state => state.application_theme,
-      getEditorTheme: state => state.editor_theme,
-      getEditorFontSize: state => state.editor_font_size,
-      getRestoreTabs: state => state.restore_tabs,
-      getDisableBlur: state => state.disable_blur
-   },
-   mutations: {
-      SET_LOCALE (state, locale) {
-         state.locale = locale;
-         i18n.global.locale = locale;
-         persistentStore.set('locale', state.locale);
-      },
-      SET_DATA_TAB_LIMIT (state, limit) {
-         state.data_tab_limit = limit;
-         persistentStore.set('data_tab_limit', state.data_tab_limit);
-      },
-      SET_ALLOW_PRERELEASE (state, allow) {
-         state.allow_prerelease = allow;
-         persistentStore.set('allow_prerelease', state.allow_prerelease);
-      },
-      SET_NOTIFICATIONS_TIMEOUT (state, timeout) {
-         state.notifications_timeout = timeout;
-         persistentStore.set('notifications_timeout', state.notifications_timeout);
-      },
-      SET_AUTO_COMPLETE (state, val) {
-         state.auto_complete = val;
-         persistentStore.set('auto_complete', state.auto_complete);
-      },
-      SET_LINE_WRAP (state, val) {
-         state.line_wrap = val;
-         persistentStore.set('line_wrap', state.line_wrap);
-      },
-      SET_EXPLOREBAR_SIZE (state, size) {
-         state.explorebar_size = size;
-         persistentStore.set('explorebar_size', state.explorebar_size);
-      },
-      SET_APPLICATION_THEME (state, theme) {
-         state.application_theme = theme;
-         persistentStore.set('application_theme', state.application_theme);
-      },
-      SET_EDITOR_THEME (state, theme) {
-         state.editor_theme = theme;
-         persistentStore.set('editor_theme', state.editor_theme);
-      },
-      SET_EDITOR_FONT_SIZE (state, size) {
-         state.editor_font_size = size;
-         persistentStore.set('editor_font_size', state.editor_font_size);
-      },
-      SET_RESTORE_TABS (state, val) {
-         state.restore_tabs = val;
-         persistentStore.set('restore_tabs', state.restore_tabs);
-      },
-      SET_DISABLE_BLUR (state, val) {
-         state.disable_blur = val;
-         persistentStore.set('disable_blur', state.disable_blur);
-      }
-   },
-   actions: {
-      changeLocale ({ commit }, locale) {
-         commit('SET_LOCALE', locale);
-      },
-      changePageSize ({ commit }, limit) {
-         commit('SET_DATA_TAB_LIMIT', limit);
-      },
-      changeAllowPrerelease ({ commit }, allow) {
-         commit('SET_ALLOW_PRERELEASE', allow);
-      },
-      updateNotificationsTimeout ({ commit }, timeout) {
-         commit('SET_NOTIFICATIONS_TIMEOUT', timeout);
-      },
-      changeExplorebarSize ({ commit }, size) {
-         commit('SET_EXPLOREBAR_SIZE', size);
-      },
-      changeAutoComplete ({ commit }, val) {
-         commit('SET_AUTO_COMPLETE', val);
-      },
-      changeLineWrap ({ commit }, val) {
-         commit('SET_LINE_WRAP', val);
-      },
-      changeApplicationTheme ({ commit }, theme) {
-         commit('SET_APPLICATION_THEME', theme);
-      },
-      changeEditorTheme ({ commit }, theme) {
-         commit('SET_EDITOR_THEME', theme);
-      },
-      changeEditorFontSize ({ commit }, size) {
-         commit('SET_EDITOR_FONT_SIZE', size);
-      },
-      changeRestoreTabs ({ commit }, size) {
-         commit('SET_RESTORE_TABS', size);
-      },
-      changeDisableBlur ({ commit }, val) {
-         commit('SET_DISABLE_BLUR', val);
-      }
-   }
-};
--- a/src/renderer/store/modules/workspaces.store.js
+++ b/src/renderer/store/modules/workspaces.store.js
@ -1,727 +0,0 @@
-'use strict';
-import Store from 'electron-store';
-import Connection from '@/ipc-api/Connection';
-import Schema from '@/ipc-api/Schema';
-import Users from '@/ipc-api/Users';
-import { uidGen } from 'common/libs/uidGen';
-const persistentStore = new Store({ name: 'tabs' });
-const tabIndex = [];
-
-export default {
-   namespaced: true,
-   strict: true,
-   state: {
-      workspaces: [],
-      selected_workspace: null
-   },
-   getters: {
-      getSelected: state => {
-         if (!state.workspaces.length) return 'NEW';
-         if (state.selected_workspace) return state.selected_workspace;
-         return state.workspaces[0].uid;
-      },
-      getWorkspace: state => uid => {
-         return state.workspaces.find(workspace => workspace.uid === uid);
-      },
-      getDatabaseVariable: state => (uid, name) => {
-         return state.workspaces.find(workspace => workspace.uid === uid).variables.find(variable => variable.name === name);
-      },
-      getWorkspaceTab: (state, getters) => tUid => {
-         if (!getters.getSelected) return;
-         const workspace = state.workspaces.find(workspace => workspace.uid === getters.getSelected);
-         if ('tabs' in workspace)
-            return workspace.tabs.find(tab => tab.uid === tUid);
-         return {};
-      },
-      getConnected: state => {
-         return state.workspaces
-            .filter(workspace => workspace.connectionStatus === 'connected')
-            .map(workspace => workspace.uid);
-      },
-      getLoadedSchemas: state => uid => {
-         return state.workspaces.find(workspace => workspace.uid === uid).loadedSchemas;
-      },
-      getSearchTerm: state => uid => {
-         return state.workspaces.find(workspace => workspace.uid === uid).searchTerm;
-      }
-   },
-   mutations: {
-      SELECT_WORKSPACE (state, uid) {
-         if (!uid)
-            state.selected_workspace = state.workspaces.length ? state.workspaces[0].uid : 'NEW';
-         else
-            state.selected_workspace = uid;
-      },
-      SET_CONNECTED (state, payload) {
-         const { uid, client, dataTypes, indexTypes, customizations, structure, version } = payload;
-
-         const cachedTabs = payload.restoreTabs ? persistentStore.get(uid, []) : [];
-
-         if (cachedTabs.length) {
-            tabIndex[uid] = cachedTabs.reduce((acc, curr) => {
-               if (curr.index > acc) acc = curr.index;
-               return acc;
-            }, null);
-         }
-
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               client,
-               dataTypes,
-               indexTypes,
-               customizations,
-               structure,
-               connectionStatus: 'connected',
-               tabs: cachedTabs,
-               selectedTab: cachedTabs.length ? cachedTabs[0].uid : null,
-               version
-            }
-            : workspace);
-      },
-      SET_CONNECTING (state, uid) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               structure: {},
-               breadcrumbs: {},
-               loadedSchemas: new Set(),
-               connectionStatus: 'connecting'
-            }
-            : workspace);
-      },
-      SET_FAILED (state, uid) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               structure: {},
-               breadcrumbs: {},
-               loadedSchemas: new Set(),
-               connectionStatus: 'failed'
-            }
-            : workspace);
-      },
-      SET_DISCONNECTED (state, uid) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               structure: {},
-               breadcrumbs: {},
-               loadedSchemas: new Set(),
-               connectionStatus: 'disconnected'
-            }
-            : workspace);
-      },
-      REFRESH_STRUCTURE (state, { uid, structure }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               structure
-            }
-            : workspace);
-      },
-      REFRESH_SCHEMA (state, { uid, schema, schemaElements }) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === uid) {
-               const schemaIndex = workspace.structure.findIndex(s => s.name === schema);
-
-               if (schemaIndex !== -1)
-                  workspace.structure[schemaIndex] = schemaElements;
-               else
-                  workspace.structure.push(schemaElements);
-            }
-            return workspace;
-         });
-      },
-      REFRESH_COLLATIONS (state, { uid, collations }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               collations
-            }
-            : workspace);
-      },
-      REFRESH_VARIABLES (state, { uid, variables }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               variables
-            }
-            : workspace);
-      },
-      REFRESH_ENGINES (state, { uid, engines }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               engines
-            }
-            : workspace);
-      },
-      REFRESH_USERS (state, { uid, users }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               users
-            }
-            : workspace);
-      },
-      ADD_WORKSPACE (state, workspace) {
-         state.workspaces.push(workspace);
-      },
-      CHANGE_BREADCRUMBS (state, { uid, breadcrumbs }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               breadcrumbs
-            }
-            : workspace);
-      },
-      SET_SEARCH_TERM (state, { uid, term }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid
-            ? {
-               ...workspace,
-               searchTerm: term
-            }
-            : workspace);
-      },
-      NEW_TAB (state, { uid, tab, content, type, autorun, schema, elementName, elementType }) {
-         if (type === 'query')
-            tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
-
-         const newTab = {
-            uid: tab,
-            index: type === 'query' ? tabIndex[uid] : null,
-            selected: false,
-            type,
-            schema,
-            elementName,
-            elementType,
-            fields: [],
-            keyUsage: [],
-            content: content || '',
-            autorun: !!autorun
-         };
-
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === uid) {
-               return {
-                  ...workspace,
-                  tabs: [...workspace.tabs, newTab]
-               };
-            }
-            else
-               return workspace;
-         });
-
-         persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
-      },
-      REMOVE_TAB (state, { uid, tab: tUid }) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === uid) {
-               return {
-                  ...workspace,
-                  tabs: workspace.tabs.filter(tab => tab.uid !== tUid)
-               };
-            }
-            else
-               return workspace;
-         });
-
-         persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
-      },
-      REMOVE_TABS (state, { uid, schema, elementName, elementType }) { // Multiple tabs based on schema and element name
-         if (elementType === 'procedure') elementType = 'routine'; // TODO: pass directly "routine"
-
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === uid) {
-               return {
-                  ...workspace,
-                  tabs: workspace.tabs.filter(tab =>
-                     tab.schema !== schema ||
-                     tab.elementName !== elementName ||
-                     tab.elementType !== elementType
-                  )
-               };
-            }
-            else
-               return workspace;
-         });
-
-         persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
-      },
-      REPLACE_TAB (state, { uid, tab: tUid, type, schema, content, elementName, elementType }) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === uid) {
-               return {
-                  ...workspace,
-                  tabs: workspace.tabs.map(tab => {
-                     if (tab.uid === tUid)
-                        return { ...tab, type, schema, content, elementName, elementType };
-
-                     return tab;
-                  })
-               };
-            }
-            else
-               return workspace;
-         });
-
-         persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
-      },
-      RENAME_TABS (state, { uid, schema, elementName, elementNewName }) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === uid) {
-               return {
-                  ...workspace,
-                  tabs: workspace.tabs.map(tab => {
-                     if (tab.elementName === elementName && tab.schema === schema) {
-                        return {
-                           ...tab,
-                           elementName: elementNewName
-                        };
-                     }
-
-                     return tab;
-                  })
-               };
-            }
-            else
-               return workspace;
-         });
-
-         persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
-      },
-      SELECT_TAB (state, { uid, tab }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, selectedTab: tab } : workspace);
-      },
-      UPDATE_TABS (state, { uid, tabs }) {
-         state.workspaces = state.workspaces.map(workspace => workspace.uid === uid ? { ...workspace, tabs } : workspace);
-         persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
-      },
-      SET_TAB_FIELDS (state, { cUid, tUid, fields }) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === cUid) {
-               return {
-                  ...workspace,
-                  tabs: workspace.tabs.map(tab => {
-                     if (tab.uid === tUid)
-                        return { ...tab, fields };
-                     else
-                        return tab;
-                  })
-               };
-            }
-            else
-               return workspace;
-         });
-
-         persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
-      },
-      SET_TAB_KEY_USAGE (state, { cUid, tUid, keyUsage }) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === cUid) {
-               return {
-                  ...workspace,
-                  tabs: workspace.tabs.map(tab => {
-                     if (tab.uid === tUid)
-                        return { ...tab, keyUsage };
-                     else
-                        return tab;
-                  })
-               };
-            }
-            else
-               return workspace;
-         });
-
-         persistentStore.set(uid, state.workspaces.find(workspace => workspace.uid === uid).tabs);
-      },
-      SET_UNSAVED_CHANGES (state, { uid, tUid, isChanged }) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === uid) {
-               return {
-                  ...workspace,
-                  tabs: workspace.tabs.map(tab => {
-                     if (tab.uid === tUid)
-                        return { ...tab, isChanged };
-
-                     return tab;
-                  })
-               };
-            }
-            else
-               return workspace;
-         });
-      },
-      ADD_LOADED_SCHEMA (state, payload) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === payload.uid)
-               workspace.loadedSchemas.add(payload.schema);
-            return workspace;
-         });
-      },
-      ADD_LOADING_ELEMENT (state, payload) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === payload.uid)
-               workspace.loadingElements.push(payload.element);
-            return workspace;
-         });
-      },
-      REMOVE_LOADING_ELEMENT (state, payload) {
-         state.workspaces = state.workspaces.map(workspace => {
-            if (workspace.uid === payload.uid) {
-               const loadingElements = workspace.loadingElements.filter(el =>
-                  el.schema !== payload.element.schema &&
-                  el.name !== payload.element.name &&
-                  el.type !== payload.element.type
-               );
-
-               workspace = { ...workspace, loadingElements };
-            }
-            return workspace;
-         });
-      }
-   },
-   actions: {
-      selectWorkspace ({ commit }, uid) {
-         commit('SELECT_WORKSPACE', uid);
-      },
-      async connectWorkspace ({ dispatch, commit, rootGetters }, connection) {
-         commit('SET_CONNECTING', connection.uid);
-
-         try {
-            const { status, response } = await Connection.connect(connection);
-            if (status === 'error') {
-               dispatch('notifications/addNotification', { status, message: response }, { root: true });
-               commit('SET_FAILED', connection.uid);
-            }
-            else {
-               let dataTypes = [];
-               let indexTypes = [];
-               let customizations = {};
-
-               switch (connection.client) {
-                  case 'mysql':
-                  case 'maria':
-                     dataTypes = require('common/data-types/mysql');
-                     indexTypes = require('common/index-types/mysql');
-                     customizations = require('common/customizations/mysql');
-                     break;
-                  case 'pg':
-                     dataTypes = require('common/data-types/postgresql');
-                     indexTypes = require('common/index-types/postgresql');
-                     customizations = require('common/customizations/postgresql');
-                     break;
-                  case 'sqlite':
-                     dataTypes = require('common/data-types/sqlite');
-                     indexTypes = require('common/index-types/sqlite');
-                     customizations = require('common/customizations/sqlite');
-                     break;
-               }
-
-               const { status, response: version } = await Schema.getVersion(connection.uid);
-
-               if (status === 'error')
-                  dispatch('notifications/addNotification', { status, message: version }, { root: true });
-
-               // Check if Maria or MySQL
-               const isMySQL = version.name.includes('MySQL');
-
-               if (isMySQL && connection.client !== 'mysql') {
-                  const connProxy = Object.assign({}, connection);
-                  connProxy.client = 'mysql';
-                  dispatch('connections/editConnection', connProxy, { root: true });
-               }
-               else if (!isMySQL && connection.client === 'mysql') {
-                  const connProxy = Object.assign({}, connection);
-                  connProxy.client = 'maria';
-                  dispatch('connections/editConnection', connProxy, { root: true });
-               }
-
-               commit('SET_CONNECTED', {
-                  uid: connection.uid,
-                  client: connection.client,
-                  dataTypes,
-                  indexTypes,
-                  customizations,
-                  structure: response,
-                  version,
-                  restoreTabs: rootGetters['settings/getRestoreTabs']
-               });
-               dispatch('refreshCollations', connection.uid);
-               dispatch('refreshVariables', connection.uid);
-               dispatch('refreshEngines', connection.uid);
-               dispatch('refreshUsers', connection.uid);
-            }
-         }
-         catch (err) {
-            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
-         }
-      },
-      async refreshStructure ({ dispatch, commit, getters }, uid) {
-         try {
-            const { status, response } = await Schema.getStructure({ uid, schemas: getters.getLoadedSchemas(uid) });
-
-            if (status === 'error')
-               dispatch('notifications/addNotification', { status, message: response }, { root: true });
-            else
-               commit('REFRESH_STRUCTURE', { uid, structure: response });
-         }
-         catch (err) {
-            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
-         }
-      },
-      async refreshSchema ({ dispatch, commit }, { uid, schema }) {
-         try {
-            const { status, response } = await Schema.getStructure({ uid, schemas: new Set([schema]) });
-            if (status === 'error')
-               dispatch('notifications/addNotification', { status, message: response }, { root: true });
-            else
-               commit('REFRESH_SCHEMA', { uid, schema, schemaElements: response.find(_schema => _schema.name === schema) });
-         }
-         catch (err) {
-            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
-         }
-      },
-      async refreshCollations ({ dispatch, commit }, uid) {
-         try {
-            const { status, response } = await Schema.getCollations(uid);
-            if (status === 'error')
-               dispatch('notifications/addNotification', { status, message: response }, { root: true });
-            else
-               commit('REFRESH_COLLATIONS', { uid, collations: response });
-         }
-         catch (err) {
-            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
-         }
-      },
-      async refreshVariables ({ dispatch, commit }, uid) {
-         try {
-            const { status, response } = await Schema.getVariables(uid);
-            if (status === 'error')
-               dispatch('notifications/addNotification', { status, message: response }, { root: true });
-            else
-               commit('REFRESH_VARIABLES', { uid, variables: response });
-         }
-         catch (err) {
-            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
-         }
-      },
-      async refreshEngines ({ dispatch, commit }, uid) {
-         try {
-            const { status, response } = await Schema.getEngines(uid);
-            if (status === 'error')
-               dispatch('notifications/addNotification', { status, message: response }, { root: true });
-            else
-               commit('REFRESH_ENGINES', { uid, engines: response });
-         }
-         catch (err) {
-            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
-         }
-      },
-      async refreshUsers ({ dispatch, commit }, uid) {
-         try {
-            const { status, response } = await Users.getUsers(uid);
-            if (status === 'error')
-               dispatch('notifications/addNotification', { status, message: response }, { root: true });
-            else
-               commit('REFRESH_USERS', { uid, users: response });
-         }
-         catch (err) {
-            dispatch('notifications/addNotification', { status: 'error', message: err.stack }, { root: true });
-         }
-      },
-      removeConnected ({ commit }, uid) {
-         Connection.disconnect(uid);
-         commit('SET_DISCONNECTED', uid);
-         commit('SELECT_TAB', { uid, tab: 0 });
-      },
-      async addWorkspace ({ commit }, uid) {
-         const workspace = {
-            uid,
-            connectionStatus: 'disconnected',
-            selectedTab: 0,
-            searchTerm: '',
-            tabs: [],
-            structure: {},
-            variables: [],
-            collations: [],
-            users: [],
-            breadcrumbs: {},
-            loadingElements: [],
-            loadedSchemas: new Set()
-         };
-
-         await commit('ADD_WORKSPACE', workspace);
-      },
-      changeBreadcrumbs ({ commit, getters }, payload) {
-         const breadcrumbsObj = {
-            schema: null,
-            table: null,
-            trigger: null,
-            triggerFunction: null,
-            procedure: null,
-            function: null,
-            scheduler: null,
-            view: null,
-            query: null
-         };
-
-         commit('CHANGE_BREADCRUMBS', { uid: getters.getSelected, breadcrumbs: { ...breadcrumbsObj, ...payload } });
-      },
-      addLoadedSchema ({ commit, getters }, schema) {
-         commit('ADD_LOADED_SCHEMA', { uid: getters.getSelected, schema });
-      },
-      addLoadingElement ({ commit, getters }, element) {
-         commit('ADD_LOADING_ELEMENT', { uid: getters.getSelected, element });
-      },
-      removeLoadingElement ({ commit, getters }, element) {
-         commit('REMOVE_LOADING_ELEMENT', { uid: getters.getSelected, element });
-      },
-      setSearchTerm ({ commit, getters }, term) {
-         commit('SET_SEARCH_TERM', { uid: getters.getSelected, term });
-      },
-      newTab ({ state, commit }, { uid, content, type, autorun, schema, elementName, elementType }) {
-         let tabUid;
-         const workspaceTabs = state.workspaces.find(workspace => workspace.uid === uid);
-
-         switch (type) {
-            case 'new-table':
-            case 'new-trigger':
-            case 'new-trigger-function':
-            case 'new-function':
-            case 'new-routine':
-            case 'new-scheduler':
-               tabUid = uidGen('T');
-               commit('NEW_TAB', {
-                  uid,
-                  tab: tabUid,
-                  content,
-                  type,
-                  autorun,
-                  schema,
-                  elementName,
-                  elementType
-               });
-               break;
-            case 'temp-data':
-            case 'temp-trigger-props':
-            case 'temp-trigger-function-props':
-            case 'temp-function-props':
-            case 'temp-routine-props':
-            case 'temp-scheduler-props': {
-               const existentTab = workspaceTabs
-                  ? workspaceTabs.tabs.find(tab =>
-                     tab.schema === schema &&
-                     tab.elementName === elementName &&
-                     tab.elementType === elementType &&
-                     [type, type.replace('temp-', '')].includes(tab.type))
-                  : false;
-
-               if (existentTab) { // if tab exists
-                  tabUid = existentTab.uid;
-               }
-               else {
-                  const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type.includes('temp-')) : false;
-
-                  if (tempTabs && tempTabs.length) { // if temp tab already opened
-                     for (const tab of tempTabs) {
-                        if (tab.isChanged) {
-                           commit('REPLACE_TAB', { // make permanent a temp table with unsaved changes
-                              uid,
-                              tab: tab.uid,
-                              type: tab.type.replace('temp-', ''),
-                              schema: tab.schema,
-                              elementName: tab.elementName,
-                              elementType: tab.elementType
-                           });
-
-                           tabUid = uidGen('T');
-                           commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
-                        }
-                        else {
-                           commit('REPLACE_TAB', { uid, tab: tab.uid, type, schema, elementName, elementType });
-                           tabUid = tab.uid;
-                        }
-                     }
-                  }
-                  else {
-                     tabUid = uidGen('T');
-                     commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
-                  }
-               }
-            }
-               break;
-            case 'data':
-            case 'table-props':
-            case 'trigger-props':
-            case 'trigger-function-props':
-            case 'function-props':
-            case 'routine-props':
-            case 'scheduler-props': {
-               const existentTab = workspaceTabs
-                  ? workspaceTabs.tabs.find(tab =>
-                     tab.schema === schema &&
-                     tab.elementName === elementName &&
-                     tab.elementType === elementType &&
-                     [`temp-${type}`, type].includes(tab.type))
-                  : false;
-
-               if (existentTab) {
-                  commit('REPLACE_TAB', { uid, tab: existentTab.uid, type, schema, elementName, elementType });
-                  tabUid = existentTab.uid;
-               }
-               else {
-                  tabUid = uidGen('T');
-                  commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
-               }
-            }
-               break;
-            default:
-               tabUid = uidGen('T');
-               commit('NEW_TAB', { uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
-               break;
-         }
-
-         commit('SELECT_TAB', { uid, tab: tabUid });
-      },
-      checkSelectedTabExists ({ state, commit }, uid) {
-         const workspace = state.workspaces.find(workspace => workspace.uid === uid);
-         const isSelectedExistent = workspace
-            ? workspace.tabs.some(tab => tab.uid === workspace.selectedTab)
-            : false;
-
-         if (!isSelectedExistent && workspace.tabs.length)
-            commit('SELECT_TAB', { uid, tab: workspace.tabs[workspace.tabs.length - 1].uid });
-      },
-      updateTabContent ({ commit }, { uid, tab, type, schema, content }) {
-         commit('REPLACE_TAB', { uid, tab, type, schema, content });
-      },
-      renameTabs ({ commit }, payload) {
-         commit('RENAME_TABS', payload);
-      },
-      removeTab ({ commit, dispatch }, payload) {
-         commit('REMOVE_TAB', payload);
-         dispatch('checkSelectedTabExists', payload.uid);
-      },
-      removeTabs ({ commit, dispatch }, payload) {
-         commit('REMOVE_TABS', payload);
-         dispatch('checkSelectedTabExists', payload.uid);
-      },
-      selectTab ({ commit }, payload) {
-         commit('SELECT_TAB', payload);
-      },
-      updateTabs ({ commit }, payload) {
-         commit('UPDATE_TABS', payload);
-      },
-      setTabFields ({ commit }, payload) {
-         commit('SET_TAB_FIELDS', payload);
-      },
-      setTabKeyUsage ({ commit }, payload) {
-         commit('SET_TAB_KEY_USAGE', payload);
-      },
-      setUnsavedChanges ({ commit }, payload) {
-         commit('SET_UNSAVED_CHANGES', payload);
-      }
-   }
-};
--- a/src/renderer/store/plugins/ipcExceptions.js
+++ b/src/renderer/store/plugins/ipcExceptions.js
@ -1,7 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-export default store => {
-   ipcRenderer.on('unhandled-exception', (event, error) => {
-      store.dispatch('notifications/addNotification', { status: 'error', message: error.message });
-   });
-};
--- a/src/renderer/store/plugins/ipcShortcuts.js
+++ b/src/renderer/store/plugins/ipcShortcuts.js
@ -1,12 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-export default store => {
-   ipcRenderer.on('toggle-preferences', () => {
-      store.dispatch('application/showSettingModal', 'general');
-   });
-
-   ipcRenderer.on('open-updates-preferences', () => {
-      store.dispatch('application/showSettingModal', 'update');
-      ipcRenderer.send('check-for-updates');
-   });
-};
--- a/src/renderer/store/plugins/ipcUpdates.js
+++ b/src/renderer/store/plugins/ipcUpdates.js
@ -1,36 +0,0 @@
-import { ipcRenderer } from 'electron';
-
-export default store => {
-   ipcRenderer.on('checking-for-update', () => {
-      store.commit('application/CHANGE_UPDATE_STATUS', 'checking');
-   });
-
-   ipcRenderer.on('update-available', () => {
-      store.commit('application/CHANGE_UPDATE_STATUS', 'available');
-   });
-
-   ipcRenderer.on('update-not-available', () => {
-      store.commit('application/CHANGE_UPDATE_STATUS', 'noupdate');
-   });
-
-   ipcRenderer.on('check-failed', () => {
-      store.commit('application/CHANGE_UPDATE_STATUS', 'nocheck');
-   });
-
-   ipcRenderer.on('no-auto-update', () => {
-      store.commit('application/CHANGE_UPDATE_STATUS', 'disabled');
-   });
-
-   ipcRenderer.on('download-progress', (event, data) => {
-      store.commit('application/CHANGE_UPDATE_STATUS', 'downloading');
-      store.commit('application/CHANGE_PROGRESS_PERCENTAGE', data.percent);
-   });
-
-   ipcRenderer.on('update-downloaded', () => {
-      store.commit('application/CHANGE_UPDATE_STATUS', 'downloaded');
-   });
-
-   ipcRenderer.on('link-to-download', () => {
-      store.commit('application/CHANGE_UPDATE_STATUS', 'link');
-   });
-};
--- a/src/renderer/stores/connections.js
+++ b/src/renderer/stores/connections.js
@ -0,0 +1,70 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import Store from 'electron-store';
+import crypto from 'crypto';
+const key = localStorage.getItem('key');
+
+if (!key)
+   localStorage.setItem('key', crypto.randomBytes(16).toString('hex'));
+else
+   localStorage.setItem('key', key);
+
+const persistentStore = new Store({
+   name: 'connections',
+   encryptionKey: key,
+   clearInvalidConfig: true
+});
+
+export const useConnectionsStore = defineStore('connections', {
+   state: () => ({
+      connections: persistentStore.get('connections', [])
+   }),
+   getters: {
+      getConnectionName: state => uid => {
+         const connection = state.connections.filter(connection => connection.uid === uid)[0];
+         let connectionName = '';
+
+         if (connection.name)
+            connectionName = connection.name;
+         else if (connection.ask)
+            connectionName = `${connection.host}:${connection.port}`;
+         else if (connection.databasePath) {
+            let string = connection.databasePath.split(/[/\\]+/).pop();
+
+            if (string.length >= 30)
+               string = `...${string.slice(-30)}`;
+
+            connectionName = string;
+         }
+         else
+            connectionName = `${connection.user + '@'}${connection.host}:${connection.port}`;
+
+         return connectionName;
+      }
+   },
+   actions: {
+      addConnection (connection) {
+         this.connections.push(connection);
+         persistentStore.set('connections', this.connections);
+      },
+      deleteConnection (connection) {
+         this.connections = this.connections.filter(el => el.uid !== connection.uid);
+         persistentStore.set('connections', this.connections);
+      },
+      editConnection (connection) {
+         const editedConnections = this.connections.map(conn => {
+            if (conn.uid === connection.uid) return connection;
+            return conn;
+         });
+         this.connections = editedConnections;
+         this.selected_conection = {};
+         persistentStore.set('connections', this.connections);
+      },
+      updateConnections (connections) {
+         this.connections = connections;
+         persistentStore.set('connections', this.connections);
+      }
+   }
+});
+
+if (import.meta.webpackHot)
+   import.meta.webpackHot.accept(acceptHMRUpdate(useConnectionsStore, import.meta.webpackHot));
--- a/src/renderer/stores/history.js
+++ b/src/renderer/stores/history.js
@ -0,0 +1,48 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import Store from 'electron-store';
+import { uidGen } from 'common/libs/uidGen';
+const persistentStore = new Store({ name: 'history' });
+const historySize = 1000;
+
+export const useHistoryStore = defineStore('history', {
+   state: () => ({
+      history: persistentStore.get('history', {}),
+      favorites: persistentStore.get('favorites', {})
+   }),
+   getters: {
+      getHistoryByWorkspace: state => uid => state.history[uid]
+   },
+   actions: {
+      saveHistory (args) {
+         if (this.getHistoryByWorkspace(args.uid) &&
+            this.getHistoryByWorkspace(args.uid).length &&
+            this.getHistoryByWorkspace(args.uid)[0].sql === args.query
+         ) return;
+
+         if (!(args.uid in this.history))
+            this.history[args.uid] = [];
+
+         this.history[args.uid] = [
+            {
+               uid: uidGen('H'),
+               sql: args.query,
+               date: new Date(),
+               schema: args.schema
+            },
+            ...this.history[args.uid]
+         ];
+
+         if (this.history[args.uid].length > historySize)
+            this.history[args.uid] = this.history[args.uid].slice(0, historySize);
+
+         persistentStore.set('history', this.history);
+      },
+      deleteQueryFromHistory (query) {
+         this.history[query.workspace] = this.history[query.workspace].filter(q => q.uid !== query.uid);
+         persistentStore.set('history', this.history);
+      }
+   }
+});
+
+if (import.meta.webpackHot)
+   import.meta.webpackHot.accept(acceptHMRUpdate(useHistoryStore, import.meta.webpackHot));
--- a/src/renderer/stores/index.js
+++ b/src/renderer/stores/index.js
@ -2,10 +2,12 @@
 import { createPinia } from 'pinia';
 import { ipcUpdates } from './plugins/ipcUpdates';
 import { ipcShortcuts } from './plugins/ipcShortcuts';
+import { ipcExceptions } from './plugins/ipcExceptions';

 const pinia = createPinia();
 pinia
   .use(ipcUpdates)
-   .use(ipcShortcuts);
+   .use(ipcShortcuts)
+   .use(ipcExceptions);

 export { pinia };
--- a/src/renderer/stores/notifications.js
+++ b/src/renderer/stores/notifications.js
@ -0,0 +1,20 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import { uidGen } from 'common/libs/uidGen';
+
+export const useNotificationsStore = defineStore('notifications', {
+   state: () => ({
+      notifications: []
+   }),
+   actions: {
+      addNotification (payload) {
+         payload.uid = uidGen('N');
+         this.notifications.unshift(payload);
+      },
+      removeNotification (uid) {
+         this.notifications = this.notifications.filter(item => item.uid !== uid);
+      }
+   }
+});
+
+if (import.meta.webpackHot)
+   import.meta.webpackHot.accept(acceptHMRUpdate(useNotificationsStore, import.meta.webpackHot));
--- a/src/renderer/stores/plugins/ipcExceptions.js
+++ b/src/renderer/stores/plugins/ipcExceptions.js
@ -0,0 +1,7 @@
+import { ipcRenderer } from 'electron';
+
+export function ipcExceptions ({ store }) {
+   ipcRenderer.on('unhandled-exception', (event, error) => {
+      store.notifications.addNotification({ status: 'error', message: error.message });
+   });
+}
--- a/src/renderer/store/modules/scratchpad.store.js
+++ b/src/renderer/store/modules/scratchpad.store.js
@ -1,25 +1,18 @@
-'use strict';
+import { defineStore, acceptHMRUpdate } from 'pinia';
 import Store from 'electron-store';
 const persistentStore = new Store({ name: 'notes' });

-export default {
-   namespaced: true,
-   strict: true,
-   state: {
+export const useScratchpadStore = defineStore('scratchpad', {
+   state: () => ({
      notes: persistentStore.get('notes', '# HOW TO SUPPORT ANTARES\n\n- [ ] Leave a star to Antares [GitHub repo](https://github.com/antares-sql/antares)\n- [ ] Send feedbacks and advices\n- [ ] Report for bugs\n- [ ] If you enjoy, share Antares with friends\n\n# ABOUT SCRATCHPAD\n\nThis is a scratchpad where you can save your **personal notes**. It supports `markdown` format, but you are free to use plain text.\nThis content is just a placeholder, feel free to clear it to make space for your notes.\n')
-   },
-   getters: {
-      getNotes: state => state.notes
-   },
-   mutations: {
-      SET_NOTES (state, notes) {
-         state.notes = notes;
-         persistentStore.set('notes', state.notes);
-      }
-   },
+   }),
   actions: {
-      changeNotes ({ commit }, notes) {
-         commit('SET_NOTES', notes);
+      changeNotes (notes) {
+         this.notes = notes;
+         persistentStore.set('notes', this.notes);
      }
   }
-};
+});
+
+if (import.meta.webpackHot)
+   import.meta.webpackHot.accept(acceptHMRUpdate(useScratchpadStore, import.meta.webpackHot));
--- a/src/renderer/stores/settings.js
+++ b/src/renderer/stores/settings.js
@ -0,0 +1,78 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import i18n from '@/i18n';
+import Store from 'electron-store';
+const persistentStore = new Store({ name: 'settings' });
+const isDarkTheme = window.matchMedia('(prefers-color-scheme: dark)');
+const defaultAppTheme = isDarkTheme.matches ? 'dark' : 'light';
+const defaultEditorTheme = isDarkTheme.matches ? 'twilight' : 'sqlserver';
+
+export const useSettingsStore = defineStore('settings', {
+   state: () => ({
+      locale: persistentStore.get('locale', 'en-US'),
+      allowPrerelease: persistentStore.get('allow_prerelease', true),
+      explorebarSize: persistentStore.get('explorebar_size', null),
+      notificationsTimeout: persistentStore.get('notifications_timeout', 5),
+      dataTabLimit: persistentStore.get('data_tab_limit', 1000),
+      autoComplete: persistentStore.get('auto_complete', true),
+      lineWrap: persistentStore.get('line_wrap', true),
+      applicationTheme: persistentStore.get('application_theme', defaultAppTheme),
+      editorTheme: persistentStore.get('editor_theme', defaultEditorTheme),
+      editorFontSize: persistentStore.get('editor_font_size', 'medium'),
+      restoreTabs: persistentStore.get('restore_tabs', true),
+      disableBlur: persistentStore.get('disable_blur', false)
+   }),
+   actions: {
+      changeLocale (locale) {
+         this.locale = locale;
+         i18n.global.locale = locale;
+         persistentStore.set('locale', this.locale);
+      },
+      changePageSize (limit) {
+         this.dataTabLimit = limit;
+         persistentStore.set('data_tab_limit', this.dataTabLimit);
+      },
+      changeAllowPrerelease (allow) {
+         this.allowPrerelease = allow;
+         persistentStore.set('allow_prerelease', this.allowPrerelease);
+      },
+      updateNotificationsTimeout (timeout) {
+         this.notificationsTimeout = timeout;
+         persistentStore.set('notifications_timeout', this.notificationsTimeout);
+      },
+      changeExplorebarSize (size) {
+         this.explorebarSize = size;
+         persistentStore.set('explorebar_size', this.explorebarSize);
+      },
+      changeAutoComplete (val) {
+         this.autoComplete = val;
+         persistentStore.set('auto_complete', this.autoComplete);
+      },
+      changeLineWrap (val) {
+         this.lineWrap = val;
+         persistentStore.set('line_wrap', this.lineWrap);
+      },
+      changeApplicationTheme (theme) {
+         this.applicationTheme = theme;
+         persistentStore.set('application_theme', this.applicationTheme);
+      },
+      changeEditorTheme (theme) {
+         this.editorTheme = theme;
+         persistentStore.set('editor_theme', this.editorTheme);
+      },
+      changeEditorFontSize (size) {
+         this.editorFontSize = size;
+         persistentStore.set('editor_font_size', this.editorFontSize);
+      },
+      changeRestoreTabs (val) {
+         this.restoreTabs = val;
+         persistentStore.set('restore_tabs', this.restoreTabs);
+      },
+      changeDisableBlur (val) {
+         this.disableBlur = val;
+         persistentStore.set('disable_blur', this.disableBlur);
+      }
+   }
+});
+
+if (import.meta.webpackHot)
+   import.meta.webpackHot.accept(acceptHMRUpdate(useSettingsStore, import.meta.webpackHot));
--- a/src/renderer/stores/workspaces.js
+++ b/src/renderer/stores/workspaces.js
@ -0,0 +1,678 @@
+import { defineStore, acceptHMRUpdate } from 'pinia';
+import Store from 'electron-store';
+import Connection from '@/ipc-api/Connection';
+import Schema from '@/ipc-api/Schema';
+import Users from '@/ipc-api/Users';
+import { uidGen } from 'common/libs/uidGen';
+import { useConnectionsStore } from '@/stores/connections';
+import { useNotificationsStore } from '@/stores/notifications';
+import { useSettingsStore } from '@/stores/settings';
+
+const persistentStore = new Store({ name: 'tabs' });
+const tabIndex = [];
+
+export const useWorkspacesStore = defineStore('workspaces', {
+   state: () => ({
+      workspaces: [],
+      selectedWorkspace: null
+   }),
+   getters: {
+      getSelected: state => {
+         if (!state.workspaces.length) return 'NEW';
+         if (state.selectedWorkspace) return state.selectedWorkspace;
+         return state.workspaces[0].uid;
+      },
+      getWorkspace: state => uid => {
+         return state.workspaces.find(workspace => workspace.uid === uid);
+      },
+      getDatabaseVariable: state => (uid, name) => {
+         return state.workspaces.find(workspace => workspace.uid === uid).variables.find(variable => variable.name === name);
+      },
+      getWorkspaceTab (state) {
+         return tUid => {
+            if (!this.getSelected) return;
+            const workspace = state.workspaces.find(workspace => workspace.uid === this.getSelected);
+            if ('tabs' in workspace)
+               return workspace.tabs.find(tab => tab.uid === tUid);
+            return {};
+         };
+      },
+      getConnected: state => {
+         return state.workspaces
+            .filter(workspace => workspace.connectionStatus === 'connected')
+            .map(workspace => workspace.uid);
+      },
+      getLoadedSchemas: state => uid => {
+         return state.workspaces.find(workspace => workspace.uid === uid).loadedSchemas;
+      },
+      getSearchTerm: state => uid => {
+         return state.workspaces.find(workspace => workspace.uid === uid).searchTerm;
+      }
+   },
+   actions: {
+      selectWorkspace (uid) {
+         if (!uid)
+            this.selectedWorkspace = this.workspaces.length ? this.workspaces[0].uid : 'NEW';
+         else
+            this.selectedWorkspace = uid;
+      },
+      async connectWorkspace (connection) {
+         this.workspaces = this.workspaces.map(workspace => workspace.uid === connection.uid
+            ? {
+               ...workspace,
+               structure: {},
+               breadcrumbs: {},
+               loadedSchemas: new Set(),
+               connectionStatus: 'connecting'
+            }
+            : workspace);
+
+         const connectionsStore = useConnectionsStore();
+         const notificationsStore = useNotificationsStore();
+         const settingsStore = useSettingsStore();
+
+         try {
+            const { status, response } = await Connection.connect(connection);
+
+            if (status === 'error') {
+               notificationsStore.addNotification({ status, message: response });
+               this.workspaces = this.workspaces.map(workspace => workspace.uid === connection.uid
+                  ? {
+                     ...workspace,
+                     structure: {},
+                     breadcrumbs: {},
+                     loadedSchemas: new Set(),
+                     connectionStatus: 'failed'
+                  }
+                  : workspace);
+            }
+            else {
+               let dataTypes = [];
+               let indexTypes = [];
+               let customizations = {};
+
+               switch (connection.client) {
+                  case 'mysql':
+                  case 'maria':
+                     dataTypes = require('common/data-types/mysql');
+                     indexTypes = require('common/index-types/mysql');
+                     customizations = require('common/customizations/mysql');
+                     break;
+                  case 'pg':
+                     dataTypes = require('common/data-types/postgresql');
+                     indexTypes = require('common/index-types/postgresql');
+                     customizations = require('common/customizations/postgresql');
+                     break;
+                  case 'sqlite':
+                     dataTypes = require('common/data-types/sqlite');
+                     indexTypes = require('common/index-types/sqlite');
+                     customizations = require('common/customizations/sqlite');
+                     break;
+               }
+
+               const { status, response: version } = await Schema.getVersion(connection.uid);
+
+               if (status === 'error')
+                  notificationsStore.addNotification({ status, message: version });
+
+               // Check if Maria or MySQL
+               const isMySQL = version.name.includes('MySQL');
+
+               if (isMySQL && connection.client !== 'mysql') {
+                  const connProxy = Object.assign({}, connection);
+                  connProxy.client = 'mysql';
+                  connectionsStore.editConnection(connProxy);
+               }
+               else if (!isMySQL && connection.client === 'mysql') {
+                  const connProxy = Object.assign({}, connection);
+                  connProxy.client = 'maria';
+                  connectionsStore.editConnection(connProxy);
+               }
+
+               const cachedTabs = settingsStore.restoreTabs ? persistentStore.get(connection.uid, []) : [];
+
+               if (cachedTabs.length) {
+                  tabIndex[connection.uid] = cachedTabs.reduce((acc, curr) => {
+                     if (curr.index > acc) acc = curr.index;
+                     return acc;
+                  }, null);
+               }
+
+               this.workspaces = this.workspaces.map(workspace => workspace.uid === connection.uid
+                  ? {
+                     ...workspace,
+                     client: connection.client,
+                     dataTypes,
+                     indexTypes,
+                     customizations,
+                     structure: response,
+                     connectionStatus: 'connected',
+                     tabs: cachedTabs,
+                     selectedTab: cachedTabs.length ? cachedTabs[0].uid : null,
+                     version
+                  }
+                  : workspace);
+
+               this.refreshCollations(connection.uid);
+               this.refreshVariables(connection.uid);
+               this.refreshEngines(connection.uid);
+               this.refreshUsers(connection.uid);
+            }
+         }
+         catch (err) {
+            notificationsStore.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      async refreshStructure (uid) {
+         const notificationsStore = useNotificationsStore();
+
+         try {
+            const { status, response } = await Schema.getStructure({ uid, schemas: this.getLoadedSchemas(uid) });
+
+            if (status === 'error')
+               notificationsStore.addNotification({ status, message: response });
+            else {
+               this.workspaces = this.workspaces.map(workspace => workspace.uid === uid
+                  ? {
+                     ...workspace,
+                     structure: response
+                  }
+                  : workspace);
+            }
+         }
+         catch (err) {
+            notificationsStore.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      async refreshSchema ({ uid, schema }) {
+         const notificationsStore = useNotificationsStore();
+
+         try {
+            const { status, response } = await Schema.getStructure({ uid, schemas: new Set([schema]) });
+            if (status === 'error')
+               notificationsStore.addNotification({ status, message: response });
+            else {
+               const schemaElements =response.find(_schema => _schema.name === schema);
+               this.workspaces = this.workspaces.map(workspace => {
+                  if (workspace.uid === uid) {
+                     const schemaIndex = workspace.structure.findIndex(s => s.name === schema);
+
+                     if (schemaIndex !== -1)
+                        workspace.structure[schemaIndex] = schemaElements;
+                     else
+                        workspace.structure.push(schemaElements);
+                  }
+                  return workspace;
+               });
+            }
+         }
+         catch (err) {
+            notificationsStore.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      async refreshCollations (uid) {
+         const notificationsStore = useNotificationsStore();
+
+         try {
+            const { status, response } = await Schema.getCollations(uid);
+            if (status === 'error')
+               notificationsStore.addNotification({ status, message: response });
+            else {
+               this.workspaces = this.workspaces.map(workspace => workspace.uid === uid
+                  ? {
+                     ...workspace,
+                     collations: response
+                  }
+                  : workspace);
+            }
+         }
+         catch (err) {
+            notificationsStore.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      async refreshVariables (uid) {
+         const notificationsStore = useNotificationsStore();
+
+         try {
+            const { status, response } = await Schema.getVariables(uid);
+            if (status === 'error')
+               notificationsStore.addNotification({ status, message: response });
+            else {
+               this.workspaces = this.workspaces.map(workspace => workspace.uid === uid
+                  ? {
+                     ...workspace,
+                     variables: response
+                  }
+                  : workspace);
+            }
+         }
+         catch (err) {
+            notificationsStore.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      async refreshEngines (uid) {
+         const notificationsStore = useNotificationsStore();
+
+         try {
+            const { status, response } = await Schema.getEngines(uid);
+            if (status === 'error')
+               notificationsStore.addNotification({ status, message: response });
+            else {
+               this.workspaces = this.workspaces.map(workspace => workspace.uid === uid
+                  ? {
+                     ...workspace,
+                     engines: response
+                  }
+                  : workspace);
+            }
+         }
+         catch (err) {
+            notificationsStore.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      async refreshUsers (uid) {
+         const notificationsStore = useNotificationsStore();
+
+         try {
+            const { status, response } = await Users.getUsers(uid);
+            if (status === 'error')
+               notificationsStore.addNotification({ status, message: response });
+            else {
+               this.workspaces = this.workspaces.map(workspace => workspace.uid === uid
+                  ? {
+                     ...workspace,
+                     users: response
+                  }
+                  : workspace);
+            }
+         }
+         catch (err) {
+            notificationsStore.addNotification({ status: 'error', message: err.stack });
+         }
+      },
+      removeConnected (uid) {
+         Connection.disconnect(uid);
+         this.workspaces = this.workspaces.map(workspace => workspace.uid === uid
+            ? {
+               ...workspace,
+               structure: {},
+               breadcrumbs: {},
+               loadedSchemas: new Set(),
+               connectionStatus: 'disconnected'
+            }
+            : workspace);
+
+         this.selectTab({ uid, tab: 0 });
+      },
+      addWorkspace (uid) {
+         const workspace = {
+            uid,
+            connectionStatus: 'disconnected',
+            selectedTab: 0,
+            searchTerm: '',
+            tabs: [],
+            structure: {},
+            variables: [],
+            collations: [],
+            users: [],
+            breadcrumbs: {},
+            loadingElements: [],
+            loadedSchemas: new Set()
+         };
+
+         this.workspaces.push(workspace);
+      },
+      changeBreadcrumbs (payload) {
+         const breadcrumbsObj = {
+            schema: null,
+            table: null,
+            trigger: null,
+            triggerFunction: null,
+            procedure: null,
+            function: null,
+            scheduler: null,
+            view: null,
+            query: null
+         };
+
+         this.workspaces = this.workspaces.map(workspace => workspace.uid === this.getSelected
+            ? {
+               ...workspace,
+               breadcrumbs: { ...breadcrumbsObj, ...payload }
+            }
+            : workspace);
+      },
+      addLoadedSchema (schema) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === this.getSelected)
+               workspace.loadedSchemas.add(schema);
+            return workspace;
+         });
+      },
+      addLoadingElement (element) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === this.getSelected)
+               workspace.loadingElements.push(element);
+            return workspace;
+         });
+      },
+      removeLoadingElement (element) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === this.getSelected) {
+               const loadingElements = workspace.loadingElements.filter(el =>
+                  el.schema !== element.schema &&
+                  el.name !== element.name &&
+                  el.type !== element.type
+               );
+
+               workspace = { ...workspace, loadingElements };
+            }
+            return workspace;
+         });
+      },
+      setSearchTerm (term) {
+         this.workspaces = this.workspaces.map(workspace => workspace.uid === this.getSelected
+            ? {
+               ...workspace,
+               searchTerm: term
+            }
+            : workspace);
+      },
+      _addTab ({ uid, tab, content, type, autorun, schema, elementName, elementType }) {
+         if (type === 'query')
+            tabIndex[uid] = tabIndex[uid] ? ++tabIndex[uid] : 1;
+
+         const newTab = {
+            uid: tab,
+            index: type === 'query' ? tabIndex[uid] : null,
+            selected: false,
+            type,
+            schema,
+            elementName,
+            elementType,
+            fields: [],
+            keyUsage: [],
+            content: content || '',
+            autorun: !!autorun
+         };
+
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: [...workspace.tabs, newTab]
+               };
+            }
+            else
+               return workspace;
+         });
+
+         persistentStore.set(uid, this.workspaces.find(workspace => workspace.uid === uid).tabs);
+      },
+      _replaceTab ({ uid, tab: tUid, type, schema, content, elementName, elementType }) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, type, schema, content, elementName, elementType };
+
+                     return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+
+         persistentStore.set(uid, this.workspaces.find(workspace => workspace.uid === uid).tabs);
+      },
+      newTab ({ uid, content, type, autorun, schema, elementName, elementType }) {
+         let tabUid;
+         const workspaceTabs = this.workspaces.find(workspace => workspace.uid === uid);
+
+         switch (type) {
+            case 'new-table':
+            case 'new-trigger':
+            case 'new-trigger-function':
+            case 'new-function':
+            case 'new-routine':
+            case 'new-scheduler':
+               tabUid = uidGen('T');
+               this._addTab({
+                  uid,
+                  tab: tabUid,
+                  content,
+                  type,
+                  autorun,
+                  schema,
+                  elementName,
+                  elementType
+               });
+               break;
+            case 'temp-data':
+            case 'temp-trigger-props':
+            case 'temp-trigger-function-props':
+            case 'temp-function-props':
+            case 'temp-routine-props':
+            case 'temp-scheduler-props': {
+               const existentTab = workspaceTabs
+                  ? workspaceTabs.tabs.find(tab =>
+                     tab.schema === schema &&
+                     tab.elementName === elementName &&
+                     tab.elementType === elementType &&
+                     [type, type.replace('temp-', '')].includes(tab.type))
+                  : false;
+
+               if (existentTab) { // if tab exists
+                  tabUid = existentTab.uid;
+               }
+               else {
+                  const tempTabs = workspaceTabs ? workspaceTabs.tabs.filter(tab => tab.type.includes('temp-')) : false;
+
+                  if (tempTabs && tempTabs.length) { // if temp tab already opened
+                     for (const tab of tempTabs) {
+                        if (tab.isChanged) {
+                           this._replaceTab({ // make permanent a temp table with unsaved changes
+                              uid,
+                              tab: tab.uid,
+                              type: tab.type.replace('temp-', ''),
+                              schema: tab.schema,
+                              elementName: tab.elementName,
+                              elementType: tab.elementType
+                           });
+
+                           tabUid = uidGen('T');
+                           this._addTab({ uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
+                        }
+                        else {
+                           this._replaceTab({ uid, tab: tab.uid, type, schema, elementName, elementType });
+                           tabUid = tab.uid;
+                        }
+                     }
+                  }
+                  else {
+                     tabUid = uidGen('T');
+                     this._addTab({ uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
+                  }
+               }
+            }
+               break;
+            case 'data':
+            case 'table-props':
+            case 'trigger-props':
+            case 'trigger-function-props':
+            case 'function-props':
+            case 'routine-props':
+            case 'scheduler-props': {
+               const existentTab = workspaceTabs
+                  ? workspaceTabs.tabs.find(tab =>
+                     tab.schema === schema &&
+                     tab.elementName === elementName &&
+                     tab.elementType === elementType &&
+                     [`temp-${type}`, type].includes(tab.type))
+                  : false;
+
+               if (existentTab) {
+                  this._replaceTab({ uid, tab: existentTab.uid, type, schema, elementName, elementType });
+                  tabUid = existentTab.uid;
+               }
+               else {
+                  tabUid = uidGen('T');
+                  this._addTab({ uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
+               }
+            }
+               break;
+            default:
+               tabUid = uidGen('T');
+               this._addTab({ uid, tab: tabUid, content, type, autorun, schema, elementName, elementType });
+               break;
+         }
+
+         this.selectTab({ uid, tab: tabUid });
+      },
+      checkSelectedTabExists (uid) {
+         const workspace = this.workspaces.find(workspace => workspace.uid === uid);
+         const isSelectedExistent = workspace
+            ? workspace.tabs.some(tab => tab.uid === workspace.selectedTab)
+            : false;
+
+         if (!isSelectedExistent && workspace.tabs.length)
+            this.selectTab({ uid, tab: workspace.tabs[workspace.tabs.length - 1].uid });
+      },
+      updateTabContent ({ uid, tab, type, schema, content }) {
+         this._replaceTab({ uid, tab, type, schema, content });
+      },
+      renameTabs ({ uid, schema, elementName, elementNewName }) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.elementName === elementName && tab.schema === schema) {
+                        return {
+                           ...tab,
+                           elementName: elementNewName
+                        };
+                     }
+
+                     return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+
+         persistentStore.set(uid, this.workspaces.find(workspace => workspace.uid === uid).tabs);
+      },
+      removeTab ({ uid, tab: tUid }) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.filter(tab => tab.uid !== tUid)
+               };
+            }
+            else
+               return workspace;
+         });
+
+         persistentStore.set(uid, this.workspaces.find(workspace => workspace.uid === uid).tabs);
+         this.checkSelectedTabExists(uid);
+      },
+      removeTabs ({ uid, schema, elementName, elementType }) { // Multiple tabs based on schema and element name
+         if (elementType === 'procedure') elementType = 'routine'; // TODO: pass directly "routine"
+
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.filter(tab =>
+                     tab.schema !== schema ||
+                     tab.elementName !== elementName ||
+                     tab.elementType !== elementType
+                  )
+               };
+            }
+            else
+               return workspace;
+         });
+
+         persistentStore.set(uid, this.workspaces.find(workspace => workspace.uid === uid).tabs);
+         this.checkSelectedTabExists(uid);
+      },
+      selectTab ({ uid, tab }) {
+         this.workspaces = this.workspaces.map(workspace => workspace.uid === uid
+            ? { ...workspace, selectedTab: tab }
+            : workspace
+         );
+      },
+      updateTabs ({ uid, tabs }) {
+         this.workspaces = this.workspaces.map(workspace => workspace.uid === uid
+            ? { ...workspace, tabs }
+            : workspace
+         );
+         persistentStore.set(uid, this.workspaces.find(workspace => workspace.uid === uid).tabs);
+      },
+      setTabFields ({ cUid, tUid, fields }) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === cUid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, fields };
+                     else
+                        return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+
+         persistentStore.set(cUid, this.workspaces.find(workspace => workspace.uid === cUid).tabs);
+      },
+      setTabKeyUsage ({ cUid, tUid, keyUsage }) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === cUid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, keyUsage };
+                     else
+                        return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+
+         persistentStore.set(cUid, this.workspaces.find(workspace => workspace.uid === cUid).tabs);
+      },
+      setUnsavedChanges ({ uid, tUid, isChanged }) {
+         this.workspaces = this.workspaces.map(workspace => {
+            if (workspace.uid === uid) {
+               return {
+                  ...workspace,
+                  tabs: workspace.tabs.map(tab => {
+                     if (tab.uid === tUid)
+                        return { ...tab, isChanged };
+
+                     return tab;
+                  })
+               };
+            }
+            else
+               return workspace;
+         });
+      }
+   }
+});
+
+if (import.meta.webpackHot)
+   import.meta.webpackHot.accept(acceptHMRUpdate(useWorkspacesStore, import.meta.webpackHot));
--- a/webpack.renderer.config.js
+++ b/webpack.renderer.config.js
@ -14,7 +14,7 @@ const parsedContributors = contributors.reduce((acc, c) => {
 }, []).join(',');

 const isDevMode = process.env.NODE_ENV !== 'production';
-const whiteListedModules = ['.bin', 'vue', '@vue', 'pinia', 'vue-i18n'];
+const whiteListedModules = ['.bin', 'vue', '@vue', 'vuex', 'pinia', 'vue-i18n'];
 const externals = {};

 fs.readdirSync('node_modules')