Added useSession and useState composables and remove vuex

package-lock.json

@@ -14,8 +14,7 @@
                 "quasar": "^2.0.0",
                 "vue": "^3.0.0",
                 "vue-i18n": "^9.1.0",
-                "vue-router": "^4.0.0-0",
+                "vue-router": "^4.0.0-0"
-                "vuex": "^4.0.0-0"
             },
             "devDependencies": {
                 "@intlify/vue-i18n-loader": "^3.0.0",
@@ -28,7 +27,6 @@
                 "@vue/cli-plugin-router": "~4.5.15",
                 "@vue/cli-plugin-typescript": "~4.5.15",
                 "@vue/cli-plugin-unit-jest": "~4.5.15",
-                "@vue/cli-plugin-vuex": "~4.5.15",
                 "@vue/cli-service": "~4.5.15",
                 "@vue/compiler-sfc": "^3.0.0",
                 "@vue/eslint-config-prettier": "^6.0.0",
@@ -19872,17 +19870,6 @@
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
             "dev": true
         },
-        "node_modules/vuex": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz",
-            "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
-            "dependencies": {
-                "@vue/devtools-api": "^6.0.0-beta.11"
-            },
-            "peerDependencies": {
-                "vue": "^3.0.2"
-            }
-        },
         "node_modules/w3c-hr-time": {
             "version": "1.0.2",
             "resolved": "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
@@ -37470,14 +37457,6 @@
             "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
             "dev": true
         },
-        "vuex": {
-            "version": "4.0.2",
-            "resolved": "https://registry.npmmirror.com/vuex/-/vuex-4.0.2.tgz",
-            "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
-            "requires": {
-                "@vue/devtools-api": "^6.0.0-beta.11"
-            }
-        },
         "w3c-hr-time": {
             "version": "1.0.2",
             "resolved": "https://registry.npmmirror.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",

package.json

@@ -17,8 +17,7 @@
         "quasar": "^2.0.0",
         "vue": "^3.0.0",
         "vue-i18n": "^9.1.0",
-        "vue-router": "^4.0.0-0",
+        "vue-router": "^4.0.0-0"
-        "vuex": "^4.0.0-0"
     },
     "devDependencies": {
         "@intlify/vue-i18n-loader": "^3.0.0",
@@ -31,7 +30,6 @@
         "@vue/cli-plugin-router": "~4.5.15",
         "@vue/cli-plugin-typescript": "~4.5.15",
         "@vue/cli-plugin-unit-jest": "~4.5.15",
-        "@vue/cli-plugin-vuex": "~4.5.15",
         "@vue/cli-service": "~4.5.15",
         "@vue/compiler-sfc": "^3.0.0",
         "@vue/eslint-config-prettier": "^6.0.0",

src/components/Topbar.vue

@@ -27,7 +27,7 @@
                 <q-btn dense flat no-wrap>
                     <q-avatar size="lg">
                         <q-img
-                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
+                            :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                             spinner-color="white"
                         />
                     </q-avatar>
@@ -41,24 +41,12 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { useState } from '@/core/composables/useState';
-import { useStore } from 'vuex';
+import { useSession } from '@/core/composables/useSession';
 import UserPanel from '@/components/UserPanel.vue';
 
-interface UserProfile {
+const session = useSession();
-    id: number;
+const { getUser } = useState();
-    username: string;
+const user = getUser;
-    nickname: string;
+const token = session.getToken();
-    token: string;
-}
-
-const store = useStore();
-const user = computed((): UserProfile => {
-    return {
-        id: store.state.user.id,
-        username: store.state.user.username,
-        nickname: store.state.user.nickname,
-        token: store.getters.token,
-    };
-});
 </script>

src/components/UserPanel.vue

@@ -21,7 +21,7 @@
             <div class="column items-center" style="min-width: 150px">
                 <q-avatar size="80px">
                     <q-img
-                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${user.token}`"
+                        :src="`/api/Images/user/160x160/${user.id}/download?access_token=${token}`"
                         spinner-color="white"
                     />
                 </q-avatar>
@@ -40,23 +40,19 @@
 <script lang="ts" setup>
 import { onMounted, computed } from 'vue';
 import { Dark, useQuasar } from 'quasar';
-import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 
+import { useState } from '@/core/composables/useState';
+import { useSession } from '@/core/composables/useSession';
+
 const quasar = useQuasar();
-const store = useStore();
+const state = useState();
+const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
 
-interface UserProfile {
-    id: number;
-    username: string;
-    nickname: string;
-    token: string;
-}
-
 const darkMode = computed({
     get(): boolean {
         return Dark.isActive;
@@ -66,33 +62,30 @@ const darkMode = computed({
     },
 });
 
-const user = computed((): UserProfile => {
+const user = state.getUser;
-    return {
+const token = session.getToken();
-        id: store.state.user.id,
-        username: store.state.user.username,
-        nickname: store.state.user.nickname,
-        token: store.getters.token,
-    };
-});
 
 onMounted(() => {
     axios
         .get('/api/accounts/acl')
-        .then((response) => {
+        .then(({ data }) => {
-            store.dispatch('updateUserData', response.data);
+            state.setUser({
+                id: data.user.id,
+                username: data.user.name,
+                nickname: data.user.nickname,
+            });
         })
         .catch(() => {
             quasar.notify({
                 message: t('errors.statusUnauthorized'),
                 type: 'negative',
             });
-            store.dispatch('logOut');
+            logout();
-            router.push('/login');
         });
 });
 
 function logout(): void {
-    store.dispatch('logOut');
+    session.destroy();
     router.push('/login');
 }
 </script>

src/core/composables/useRole.ts

@@ -1,6 +1,6 @@
 import store from '@/store';
 
-export function Role() {
+export function useRole() {
     function hasAny(roles: string[]): boolean {
         const roleStore: string[] = store.state.roles;
 

src/core/composables/useSession.ts

@@ -0,0 +1,57 @@
+import { useState } from './useState';
+
+interface Session {
+    token: string;
+    keepLogin: boolean;
+}
+
+interface useSession {
+    getToken: () => string;
+    setToken: (data: Session) => void;
+    destroy: () => void;
+    isLoggedIn: () => boolean;
+}
+
+export function useSession(): useSession {
+    function getToken(): string {
+        const localToken = localStorage.getItem('token');
+        const sessionToken = sessionStorage.getItem('token');
+
+        return localToken || sessionToken || '';
+    }
+
+    function setToken(data: Session): void {
+        if (data.keepLogin) {
+            localStorage.setItem('token', data.token);
+        } else {
+            sessionStorage.setItem('token', data.token);
+        }
+    }
+
+    function destroy(): void {
+        localStorage.removeItem('token');
+        sessionStorage.getItem('token');
+
+        const { setUser } = useState();
+
+        setUser({
+            id: 0,
+            username: '',
+            nickname: '',
+        });
+    }
+
+    function isLoggedIn() {
+        const localToken = localStorage.getItem('token');
+        const sessionToken = sessionStorage.getItem('token');
+
+        return !!(localToken || sessionToken);
+    }
+
+    return {
+        getToken,
+        setToken,
+        destroy,
+        isLoggedIn,
+    };
+}

src/core/composables/useState.ts

@@ -0,0 +1,43 @@
+import { ref, Ref, computed, ComputedRef } from 'vue';
+
+interface User {
+    id: number;
+    username: string;
+    nickname: string;
+}
+
+const user: Ref<User> = ref({
+    id: 0,
+    username: '',
+    nickname: '',
+});
+
+const roles = ref([]);
+
+export function useState() {
+    function setUser(data: User): void {
+        user.value = {
+            id: data.id,
+            username: data.username,
+            nickname: data.nickname,
+        };
+    }
+
+    const getUser: ComputedRef<User> = computed(() => {
+        return {
+            id: user.value.id,
+            username: user.value.username,
+            nickname: user.value.nickname,
+        };
+    });
+
+    /*   function setRoles(data) {
+        roles.value = data;
+    } */
+
+    return {
+        roles,
+        getUser,
+        setUser,
+    };
+}

src/main.ts

@@ -1,15 +1,11 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import router from './router';
-import store from './store';
 import { Quasar } from 'quasar';
 import quasarUserOptions from './quasar-user-options';
 import i18n from './i18n';
-import filters from './core/filters';
 
-const app = createApp(App).use(i18n).use(Quasar, quasarUserOptions).use(store).use(router);
+const app = createApp(App).use(i18n).use(Quasar, quasarUserOptions).use(router);
-
-app.config.globalProperties.$filters = filters;
 
 app.mount('#app');
 

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
-import store from '../store';
+import { useSession } from '@/core/composables/useSession';
 
 const routes: Array<RouteRecordRaw> = [
     {
@@ -38,9 +38,10 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-    const loggedIn = store.getters.isLoggedIn;
+    const session = useSession();
+    const { isLoggedIn } = session;
 
-    if (to.name !== 'Login' && !loggedIn) {
+    if (!isLoggedIn && to.name !== 'Login') {
         next({ path: '/login', query: { redirect: to.fullPath } });
     } else {
         next();

src/shims-vuex.d.ts

@@ -1,8 +0,0 @@
-import { Store } from '@/store'; // path to store file
-
-declare module '@vue/runtime-core' {
-    interface ComponentCustomProperties {
-        $store: Store;
-        $filters: Record<string, T>;
-    }
-}

src/store/index.ts

@@ -1,77 +0,0 @@
-import { createStore } from 'vuex';
-
-interface UserProfile {
-    id: number;
-    username: string;
-    nickname: string;
-    token: string;
-}
-
-interface Role {
-    id: number;
-    name: string;
-}
-
-interface UserRole {
-    id: number;
-    role: Role;
-}
-
-export default createStore({
-    state: {
-        user: {},
-        roles: [],
-    },
-    mutations: {
-        setUser(state, data) {
-            const user: UserProfile = {
-                id: data.id,
-                username: data.name,
-                nickname: data.nickname,
-                token: data.token,
-            };
-
-            state.user = user;
-        },
-        setRoles(state, data) {
-            const roles = data.map((userRole: UserRole) => userRole.role.name);
-            state.roles = roles;
-        },
-    },
-    actions: {
-        logIn({ commit }, data) {
-            if (data.keepLogin) {
-                localStorage.setItem('token', data.token);
-            } else {
-                sessionStorage.setItem('token', data.token);
-            }
-
-            commit('setUser', data);
-        },
-        logOut({ commit }) {
-            localStorage.removeItem('token');
-            sessionStorage.getItem('token');
-
-            commit('setUser', {});
-        },
-        updateUserData({ commit }, data) {
-            commit('setUser', data.user);
-            commit('setRoles', data.roles);
-        },
-    },
-    getters: {
-        isLoggedIn() {
-            const localToken = localStorage.getItem('token');
-            const sessionToken = sessionStorage.getItem('token');
-
-            return !!(localToken || sessionToken);
-        },
-        token() {
-            const localToken = localStorage.getItem('token');
-            const sessionToken = sessionStorage.getItem('token');
-
-            return localToken || sessionToken;
-        },
-    },
-    modules: {},
-});

src/views/Login/Login.vue

@@ -57,13 +57,14 @@
 <script lang="ts" setup>
 import { computed, ref } from 'vue';
 import { Dark, useQuasar } from 'quasar';
-import { useStore } from 'vuex';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import axios from 'axios';
 
+import { useSession } from '@/core/composables/useSession';
+
 const quasar = useQuasar();
-const store = useStore();
+const session = useSession();
 const router = useRouter();
 const { t, locale } = useI18n();
 
@@ -87,7 +88,7 @@ function onSubmit(): void {
             password: password.value,
         })
         .then((response) => {
-            store.dispatch('logIn', {
+            session.set({
                 token: response.data.token,
                 keepLogin: keepLogin,
             });
@@ -99,7 +100,6 @@ function onSubmit(): void {
             router.push('/dashboard');
         })
         .catch((error) => {
-            console.log(error);
             const errorCode = error.response.status;
             if (errorCode === 401) {
                 quasar.notify({