Get store only when needed

app/assets/composables/authCheckApi.ts

@@ -2,13 +2,12 @@ import { ref } from 'vue'
 import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '../interfaces'
 import { useAuthStore } from '../stores'
-const authStore = useAuthStore()
 
 /**
  * Composable used to communicate with the `/auth/check` api. Calling "check"
  * will fetch the user info from the server and set the frontend object.
  */
-export function useCheckApi(auth: typeof authStore) {
+export function useCheckApi() {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()
 
@@ -18,9 +17,11 @@ export function useCheckApi(auth: typeof authStore) {
         axios
             .get('/account/auth-check')
             .then((response) => {
+                const auth = useAuthStore()
                 auth.setUser(response.data.user)
             })
             .catch((err) => {
+                const auth = useAuthStore()
                 auth.unsetUser()
                 error.value = {
                     ...err.response.data,

app/assets/composables/loginApi.ts

@@ -3,15 +3,14 @@ import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '../interfaces'
 import { useAuthStore } from '../stores'
 import type { LoginForm } from '../interfaces'
-const authStore = useAuthStore()
 
 /**
  * Composable used to communicate with the `/auth/login` api. Calling "login"
  * with the user login data will validate the data with the server. If login is
  * successful, the user will be set on the frontend object. Otherwise, an error
  * will be defined.
  */
-export function useLoginApi(auth: typeof authStore) {
+export function useLoginApi() {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()
 
@@ -22,6 +21,7 @@ export function useLoginApi(auth: typeof authStore) {
         axios
             .post('/account/login', form)
             .then((response) => {
+                const auth = useAuthStore()
                 auth.setUser(response.data)
             })
             .catch((err) => {

app/assets/composables/logoutApi.ts

@@ -2,21 +2,24 @@ import { ref } from 'vue'
 import axios from 'axios'
 import { type AlertInterface, AlertStyle } from '../interfaces'
 import { useAuthStore } from '../stores'
-const authStore = useAuthStore()
 
 /**
  * Composable used to communicate with the `/auth/logout` api. Calling "logout"
  * will send the request to logout the user server side and delete the frontend
  * user object.
  */
-export function useLogoutApi(auth: typeof authStore) {
+export function useLogoutApi() {
     const loading = ref(false)
     const error = ref<AlertInterface | undefined>()
 
     const logout = () => {
         loading.value = true
         error.value = undefined
+
+        // Unset user in store
+        const auth = useAuthStore()
         auth.unsetUser()
+
         axios
             .get('/account/logout')
             .catch((err) => {