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

src/axios/index.ts

@@ -0,0 +1,5 @@
+import axios from 'axios'
+
+export default axios.create({
+    baseURL: 'http://localhost:3333/api/v1/'
+})

src/stores/user.ts

@@ -2,7 +2,8 @@ import { defineStore, storeToRefs } from 'pinia'
 import { useNotifications } from './notifications'
 import { getUnixTime } from 'date-fns'
 import { AxiosError } from 'axios'
-import axios from 'axios'
+import axios from '@/axios'
+import Axios from 'axios'
 
 type AuthSuccResult = {
 	user: string,
@@ -38,7 +39,7 @@ export const useUser = defineStore({
             const notifications = useNotifications()
 
             try {
-                const response = await axios.post<AuthSuccResult>('http://localhost:3333/api/v1/login', {
+                const response = await axios.post<AuthSuccResult>('login', {
                     username: username,
                     password: password
                 })
@@ -54,7 +55,7 @@ export const useUser = defineStore({
 
                 return true
             } catch(err : unknown) {              
-                if (axios.isAxiosError(err) && err.response && err.response.data){  
+                if (Axios.isAxiosError(err) && err.response && err.response.data){  
 
                     const data = err.response.data
 
@@ -80,14 +81,11 @@ export const useUser = defineStore({
             const notifications = useNotifications()
 
             try {
-                const ai = axios.create({
-                    baseURL: 'http://localhost:3333/api/v1/',
+                await axios.post('logout', '', {
                     headers: { 
-                        'Authorization': 'Bearer '+this.token
+                        'Authorization': 'Bearer '+useUser().token
                     }
-
                 })
-                await ai.post('/logout')
 
 
                 notifications.add('success','Logged out successfully')

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>