refactor: onUserId.js

src/pages/Ecomerce/OrdersView.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted, inject, watch } from 'vue';
+import { ref, onMounted, inject } from 'vue';
 import { useRoute } from 'vue-router';
 import { useI18n } from 'vue-i18n';
 
@@ -8,11 +8,11 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnConfirm from 'src/components/ui/VnConfirm.vue';
 import VnList from 'src/components/ui/VnList.vue';
 
+import { onUserId } from 'src/utils/onUserId';
 import useNotify from 'src/composables/useNotify.js';
 import { currency, formatDateTitle } from 'src/lib/filters.js';
 import { tpvStore } from 'stores/tpv';
 import { useAppStore } from 'stores/app';
-import { useUserStore } from 'stores/user';
 import { storeToRefs } from 'pinia';
 
 const { t } = useI18n();
@@ -21,7 +21,6 @@ const jApi = inject('jApi');
 const api = inject('api');
 const { notify } = useNotify();
 const appStore = useAppStore();
-const userStore = useUserStore();
 const { isHeaderMounted } = storeToRefs(appStore);
 
 const showAmountToPayDialog = ref(null);
@@ -64,20 +63,6 @@ const onConfirmPay = async () => {
     await tpv.pay(amountToPay.value);
 };
 
-const onUserId = (cb) => watch(
-  () => userStore?.user?.id,
-  async userId => {
-    if (userId) {
-      try {
-        await cb(userId);
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  },
-  { immediate: true }
-);
-
 onUserId(getDebt);
 
 </script>

src/utils/onUserId.js

@@ -0,0 +1,19 @@
+import { watch } from 'vue';
+
+import { useUserStore } from 'stores/user';
+
+const userStore = useUserStore();
+
+export const onUserId = (cb) => watch(
+  () => userStore?.user?.id,
+  async userId => {
+    if (userId) {
+      try {
+        await cb(userId);
+      } catch (error) {
+        console.error(error);
+      }
+    }
+  },
+  { immediate: true }
+);