feat: migrate from Vuex to Pinia

kuzzleio · Oct 10, 2024 · a558985 · a558985
1 parent c171f57
commit a558985
Show file tree

Hide file tree

Showing 145 changed files with 1,756 additions and 2,093 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,6 +31,7 @@
     "leaflet": "^1.9.4",
     "lodash": "^4.17.21",
     "moment": "^2.30.1",
+    "pinia": "^2.2.4",
     "velocity-animate": "^1.5.2",
     "vue": "^2.7.16",
     "vue-apexcharts": "^1.6.2",
@@ -41,8 +42,7 @@
     "vue-router": "^3.6.5",
     "vue2-leaflet": "^2.7.1",
     "vuedraggable": "^2.24.3",
-    "vuejs-logger": "1.5.5",
-    "vuex": "^3.6.2"
+    "vuejs-logger": "1.5.5"
   },
   "engines": {
     "node": ">= 20.0.0",

diff --git a/src/components/ApiAction.vue b/src/components/ApiAction.vue
@@ -73,9 +73,10 @@
 
 <script>
 import _ from 'lodash';
+import { mapState } from 'pinia';
 import { Multipane, MultipaneResizer } from 'vue-multipane';
-import { mapGetters } from 'vuex';
 
+import { useAuthStore, useKuzzleStore } from '@/stores';
 import { truncateName } from '@/utils';
 
 import QueryCard from '@/components/ApiAction/QueryCard.vue';
@@ -103,8 +104,8 @@ export default {
     };
   },
   computed: {
-    ...mapGetters('kuzzle', ['$kuzzle', 'currentEnvironment']),
-    ...mapGetters('auth', ['canGetPublicApi', 'canGetOpenApi']),
+    ...mapState(useKuzzleStore, ['$kuzzle', 'currentEnvironment']),
+    ...mapState(useAuthStore, ['canGetPublicApi', 'canGetOpenApi']),
     emptyTab() {
       return {
         query: {

diff --git a/src/components/Common/Breadcrumb.vue b/src/components/Common/Breadcrumb.vue
@@ -98,26 +98,28 @@
 </template>
 
 <script>
-import { KIndexGettersTypes, StoreNamespaceTypes } from '@/store';
+import { useStorageIndexStore } from '@/stores';
 
 export default {
   name: 'CommonBreadcrumb',
+  setup() {
+    return {
+      storageIndexStore: useStorageIndexStore(),
+    };
+  },
   methods: {
     index() {
       return this.$route.params.indexName
-        ? this.$store.getters[`${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_INDEX}`](
-            this.$route.params.indexName,
-          )
+        ? this.storageIndexStore.getOneIndex(this.$route.params.indexName)
         : undefined;
     },
     isCollectionRealtime() {
       if (!this.index || this.$route.params.collectionName) {
         return false;
       }
 
-      return this.$store.getters[
-        `${StoreNamespaceTypes.INDEX}/${KIndexGettersTypes.GET_ONE_COLLECTION}`
-      ](this.index, this.$route.params.collectionName).isRealtime;
+      return this.storageIndexStore.getOneCollection(this.index, this.$route.params.collectionName)
+        .isRealtime;
     },
     isRouteActive(routeName) {
       if (Array.isArray(routeName)) {

diff --git a/src/components/Common/CommonList.vue b/src/components/Common/CommonList.vue
@@ -53,7 +53,7 @@ import ProfileItem from '../Security/Profiles/ProfileItem.vue';
 import RoleItem from '../Security/Roles/RoleItem.vue';
 import UserItem from '../Security/Users/UserItem.vue';
 import * as filterManager from '@/services/filterManager';
-import { KToasterMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useToasterStore } from '@/stores';
 
 import CrudlDocument from './CrudlDocument.vue';
 
@@ -83,7 +83,11 @@ export default {
       required: true,
     },
   },
-
+  setup() {
+    return {
+      toasterStore: useToasterStore(),
+    };
+  },
   data() {
     return {
       searchFilterOperands: filterManager.searchFilterOperands,
@@ -162,9 +166,9 @@ export default {
         filterManager.save(newFilters, this.$router, this.index, this.collection);
         filterManager.addNewHistoryItemAndSave(newFilters, this.index, this.collection);
       } catch (error) {
-        this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+        this.toasterStore.toast = {
           text: 'An error occurred while updating filters: <br />' + error.message,
-        });
+        };
       }
     },
     fetchDocuments() {
@@ -196,9 +200,9 @@ export default {
           this.totalDocuments = res.total;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: 'An error occurred while performing search: <br />' + e.message,
-          });
+          };
         });
     },
     editDocument(route, id) {

diff --git a/src/components/Common/CrudlDocument.vue b/src/components/Common/CrudlDocument.vue
@@ -129,7 +129,7 @@
 <script>
 import Modal from '../Materialize/Modal.vue';
 import Pagination from '../Materialize/Pagination.vue';
-import { KToasterMutationsTypes, StoreNamespaceTypes } from '@/store';
+import { useToasterStore } from '@/stores';
 
 import Filters from './Filters/Filters.vue';
 
@@ -140,7 +140,6 @@ export default {
     Modal,
     Filters,
   },
-
   props: {
     index: String,
     collection: String,
@@ -169,6 +168,11 @@ export default {
       required: true,
     },
   },
+  setup() {
+    return {
+      toasterStore: useToasterStore(),
+    };
+  },
   data() {
     return {
       documentIdToDelete: '',
@@ -204,9 +208,9 @@ export default {
           return null;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: e.message,
-          });
+          };
         });
     },
     confirmSingleDelete(id) {
@@ -217,9 +221,9 @@ export default {
           return null;
         })
         .catch((e) => {
-          this.$store.commit(`${StoreNamespaceTypes.TOASTER}/${KToasterMutationsTypes.SET_TOAST}`, {
+          this.toasterStore.toast = {
             text: e.message,
-          });
+          };
         });
     },
     onFiltersUpdated(newFilters) {

diff --git a/src/components/Common/Environments/CreateEnvironment.vue b/src/components/Common/Environments/CreateEnvironment.vue
@@ -126,7 +126,7 @@
 import { useVuelidate } from '@vuelidate/core';
 import { numeric, required, helpers } from '@vuelidate/validators';
 
-import { KKuzzleActionsTypes, StoreNamespaceTypes } from '@/store';
+import { useKuzzleStore } from '@/stores';
 import { DEFAULT_COLOR, ENV_COLORS, NO_ADMIN_WARNING_HOSTS } from '@/utils';
 import { isValidHostname, notIncludeScheme } from '@/validators';
 
@@ -153,7 +153,10 @@ export default {
   components: {},
   props: ['environmentId'],
   setup() {
-    return { v$: useVuelidate() };
+    return {
+      v$: useVuelidate(),
+      kuzzleStore: useKuzzleStore(),
+    };
   },
   data() {
     return {
@@ -214,7 +217,7 @@ export default {
       return ENV_COLORS;
     },
     environments() {
-      return this.$store.state.kuzzle.environments;
+      return this.kuzzleStore.environments;
     },
     useHttps() {
       return useHttps;
@@ -317,37 +320,31 @@ export default {
       this.submitting = true;
       try {
         if (this.environmentId) {
-          return this.$store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.UPDATE_ENVIRONMENT}`,
-            {
-              id: this.environmentId,
-              environment: {
-                name: this.environment.name,
-                color: this.environment.color,
-                host: this.environment.host,
-                port: parseInt(this.environment.port),
-                ssl: this.environment.ssl,
-                backendMajorVersion: this.environment.backendMajorVersion,
-                hideAdminWarning: this.environment.hideAdminWarning,
-              },
+          return this.kuzzleStore.updateEnvironment({
+            id: this.environmentId,
+            environment: {
+              name: this.environment.name,
+              color: this.environment.color,
+              host: this.environment.host,
+              port: parseInt(this.environment.port),
+              ssl: this.environment.ssl,
+              backendMajorVersion: this.environment.backendMajorVersion,
+              hideAdminWarning: this.environment.hideAdminWarning,
             },
-          );
+          });
         } else {
-          return this.$store.dispatch(
-            `${StoreNamespaceTypes.KUZZLE}/${KKuzzleActionsTypes.CREATE_ENVIRONMENT}`,
-            {
-              id: this.environment.name,
-              environment: {
-                name: this.environment.name,
-                color: this.environment.color,
-                host: this.environment.host,
-                port: parseInt(this.environment.port),
-                ssl: this.environment.ssl,
-                backendMajorVersion: this.environment.backendMajorVersion,
-                hideAdminWarning: !!NO_ADMIN_WARNING_HOSTS.includes(this.environment.host),
-              },
+          return this.kuzzleStore.createEnvironment({
+            id: this.environment.name,
+            environment: {
+              name: this.environment.name,
+              color: this.environment.color,
+              host: this.environment.host,
+              port: parseInt(this.environment.port),
+              ssl: this.environment.ssl,
+              backendMajorVersion: this.environment.backendMajorVersion,
+              hideAdminWarning: !!NO_ADMIN_WARNING_HOSTS.includes(this.environment.host),
             },
-          );
+          });
         }
       } catch (error) {
         this.$log.error(error.message);