Detaching store from composable

Author: diazdesandi

03-issuesApp/src/issues/composables/useIssues.ts

@@ -1,8 +1,9 @@
 import { useQuery } from '@tanstack/vue-query';
 import { githubApi } from 'src/api/githubApi';
 import { Issue, State } from '../interfaces/issue';
-import { useIssuesStore } from 'src/stores/issues';
-import { storeToRefs } from 'pinia';
+// import { useIssuesStore } from 'src/stores/issues';
+// import { storeToRefs } from 'pinia';
+import useStore from './useStore';
 
 const getIssues = async (labels: string[], state: State): Promise<Issue[]> => {
   const params = new URLSearchParams();
@@ -22,8 +23,11 @@ const getIssues = async (labels: string[], state: State): Promise<Issue[]> => {
 };
 
 const useIssues = () => {
-  const issuesStore = useIssuesStore();
-  const { labels, state } = storeToRefs(issuesStore);
+  // const issuesStore = useIssuesStore();
+  // const { labels, state } = storeToRefs(issuesStore);
+
+  // Desacoplando el Store
+  const { labels, state } = useStore();
 
   const issuesQuery = useQuery(['issues', { labels, state }], () =>
     // Se envían los valores en lugar de la referencia reactiva

03-issuesApp/src/issues/composables/useStore.ts

@@ -0,0 +1,19 @@
+import { storeToRefs } from 'pinia';
+import { useIssuesStore } from 'src/stores/issues';
+
+const useStore = () => {
+  const issuesStore = useIssuesStore();
+  const { labels, state } = storeToRefs(issuesStore);
+
+  return {
+    // Reactive props
+    labels,
+    state,
+
+    // Getters
+
+    // Actions
+  };
+};
+
+export default useStore;