Refactoring: Exported axios instance creation, now watching route param changes in EmployeesDetails.

src/views/EmployeesDetails.vue

@@ -19,14 +19,15 @@ type ResultData = {
 }
 
 import VProfileControls from '@/components/VProfileControls.vue';
-import { reactive, onMounted } from 'vue'
+import { reactive, onMounted, computed, watch } from 'vue'
 import { useUser } from '@/stores/user';
-import axios from 'axios'
+import axios from '@/axios'
 import { useNotifications } from '@/stores/notifications';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 const userStore = useUser()
 const useNotification = useNotifications()
+const route = useRoute()
 
 const employee = reactive({
     id: NaN,
@@ -47,24 +48,27 @@ const user = reactive({
     passwordRepeat: ''
 })
 
-
+function onUpdate() {
+    
+}   
 
 function onEnter() {
     console.log("hi")
 }
 
-onMounted(async () => {
-    const ai = axios.create({
-        baseURL: 'http://localhost:3333/api/v1/',
-        headers: { 
-            'Authorization': 'Bearer '+userStore.token
-        }
-    })
+watch(() => [route.params, route.name], ([newParam, newName], [oldParam, oldName]) => {
+    if(newName === oldName && newParam !== oldParam) {
+        getEmployee()
+    }
+})
 
+async function getEmployee() {
     try {
-        const id = useRoute().params.id
-
-        const data : ResultData = await <ResultData>(await ai.get('employees/'+id)).data
+        const data : ResultData = await <ResultData>(await axios.get('employees/'+route.params.id, {
+            headers: { 
+                'Authorization': 'Bearer '+useUser().token
+            }
+        })).data
 
         Object.assign(employee, data.employee)
         Object.assign(user, data.user)        
@@ -72,7 +76,10 @@ onMounted(async () => {
     catch(err){
         if(err instanceof Error) useNotification.add('danger', err.message, -1)
     }
-    
+}
+
+onMounted(async () => {
+    getEmployee()
 })
 
 </script>