refac: define pinia store for each feature...

instead of hooks

src/app/contacts/ContactForm/store.ts

@@ -1,13 +1,13 @@
 import { useLoader } from "@/shared/lib/composables/loader";
 import { defineInjectKey, validInject } from "@/shared/lib/di";
-import { reactive } from "vue";
+import { defineStore } from "pinia";
 import { useContactsStore } from "../store";
 import type { ContactFormApiCreateProps, ContactFormApiPort } from "./ports";
 
 export const CONTACT_FORM_API_PROVIDE_KEY =
   defineInjectKey<ContactFormApiPort>("ContactFormApi");
 
-export function useContactFormStore() {
+export const useContactFormStore = defineStore("ContactForm", () => {
   const api = validInject(CONTACT_FORM_API_PROVIDE_KEY);
 
   const contactsStore = useContactsStore();
@@ -18,8 +18,8 @@ export function useContactFormStore() {
     contactsStore.addContact(contact);
   }
 
-  return reactive({
+  return {
     loading: loader.loading,
     create,
-  });
-}
+  };
+});

src/app/contacts/ContactsTable/store.ts

@@ -1,6 +1,6 @@
 import { useLoader } from "@/shared/lib/composables/loader";
 import { defineInjectKey, validInject } from "@/shared/lib/di";
-import { storeToRefs } from "pinia";
+import { defineStore, storeToRefs } from "pinia";
 import { reactive } from "vue";
 import { useContactsStore } from "../store";
 import type {
@@ -11,7 +11,7 @@ import type {
 export const CONTACTS_TABLE_API_PROVIDE_KEY =
   defineInjectKey<ContactsTableApiPort>("ContactsTableApi");
 
-export function useContactsTableStore() {
+export const useContactsTableStore = defineStore("ContactsTable", () => {
   const api = validInject(CONTACTS_TABLE_API_PROVIDE_KEY);
 
   const contactsStore = useContactsStore();
@@ -23,9 +23,9 @@ export function useContactsTableStore() {
     contactsStore.setContacts(contacts);
   }
 
-  return reactive({
+  return {
     loading: loader.loading,
     contacts,
     fetchMany,
-  });
-}
+  };
+});

src/app/lists/ListsSelect/store.ts

@@ -1,13 +1,14 @@
 import { useLoader } from "@/shared/lib/composables/loader";
 import { defineInjectKey, validInject } from "@/shared/lib/di";
-import { computed, reactive } from "vue";
+import { defineStore } from "pinia";
+import { computed } from "vue";
 import { useListsStore } from "../store";
 import type { ListsSelectApiPort } from "./ports";
 
 export const LISTS_SELECT_API_PROVIDE_KEY =
-  defineInjectKey<ListsSelectApiPort>("ListsTableApi");
+  defineInjectKey<ListsSelectApiPort>("ListsSelectApi");
 
-export function useListsSelectStore() {
+export const useListsSelectStore = defineStore("ListsSelect", () => {
   const api = validInject(LISTS_SELECT_API_PROVIDE_KEY);
 
   const listsStore = useListsStore();
@@ -25,9 +26,9 @@ export function useListsSelectStore() {
     listsStore.setLists(lists);
   }
 
-  return reactive({
+  return {
     loading: loader.loading,
     selectItems,
     fetchMany,
-  });
-}
+  };
+});