Migrate multiple vuex stores to pinia

src/App.vue

@@ -14,7 +14,8 @@ import { Component, Vue } from "vue-property-decorator";
 import Header from "@/components/layout/header/Header.vue";
 import Footer from "@/components/layout/footer/Footer.vue";
 import Loading from "@/components/shared/Loading.vue";
-import { mapGetters } from "vuex";
+import { useAppState } from "@/stores/app"
+import { mapState } from "pinia";
 
 @Component({
   components: {
@@ -23,7 +24,7 @@ import { mapGetters } from "vuex";
     Loading,
   },
   computed: {
-    ...mapGetters(["loading"]),
+    ...mapState(useAppState, {loading: "getLoading"}),
   },
 })
 export default class App extends Vue {}

src/components/contact/ContactForm.vue

@@ -122,10 +122,13 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { mapActions, mapGetters } from "vuex";
+import { useAppState, useContactState } from "@/stores"
+import { mapActions as pmapActions, mapState } from "pinia";
+
 import router from "@/router";
 import { ICredentialType } from "@/interfaces/api/v2/credential-type.interface";
 import { IContactRequest } from "@/interfaces/api/v4/contact.interface";
-import { contactReason } from "@/store/modules/contact";
+import { contactReason } from "@/stores/contact";
 import { unwrapTranslations } from "@/utils/entity";
 
 interface Data {
@@ -158,10 +161,8 @@ export default {
     };
   },
   methods: {
-    ...mapActions({
-      setLoading: "setLoading",
-      sendContact: "sendContact"
-    }),
+    ...pmapActions(useAppState, ["setLoading"]),
+    ...pmapActions(useContactState, ["sendContact"]),
     async submit(e: Event): Promise<void> {
       e.preventDefault();
       const isFormValid = (
@@ -188,10 +189,10 @@ export default {
   },
   computed: {
     ...mapGetters({
-      loading: "loading",
       credentialTypes: "credentialTypes",
       getLikeStatus: "getLikeStatus"
     }),
+    ...mapState(useAppState, {loading: "getLoading"}),
     requestTypes: function(): Array<{ text: string; value: string }> {
       return Object.keys(contactReason).map((key) => ({
         text: contactReason[key],

src/components/entity/CredentialItem.vue

@@ -100,6 +100,8 @@
 import { Component, Prop, Vue } from "vue-property-decorator";
 import "@/filters/date.filter";
 import { mapGetters } from "vuex";
+import { mapState } from "pinia";
+import { useTopicState } from "@/stores";
 import { ICredentialDisplayType } from "@/interfaces/api/v4/credential.interface";
 import { selectFirstAttrItem } from "@/utils/attribute";
 import i18n from "@/i18n/index";
@@ -115,9 +117,9 @@ import { isExpired, toTranslationFormat } from "@/utils/entity";
     ...mapGetters([
       "mdiOpenInNew",
       "mdiShieldCheckOutline",
-      "selectedTopic",
       "credentialTypes",
     ]),
+    ...mapState(useTopicState, ["selectedTopic"])
   },
 })
 export default class CredentialItem extends Vue {