feat: Split main store

src/interfaces/state.ts

@@ -1,5 +1,13 @@
 import {IUser} from './user';
-export interface IState {
+export interface IAuthState {
     token: string;
     user: IUser;
 }
+
+export interface IAuthModule {
+    namespaced: boolean;
+    state: IAuthState;
+    mutations: any;
+    actions: any;
+    getters: any;
+}

src/modules/login/login.ts

@@ -35,7 +35,7 @@ export default class Login extends Vue {
         try {
             this.isAuthLoading = true;
             const token = await loginByAuth(this.email, this.password);
-            this.$store.dispatch('login', token);
+            this.$store.dispatch('auth/login', token);
             this.toast.success('Login succeeded');
             this.isAuthLoading = false;
         } catch (error: any) {
@@ -49,7 +49,7 @@ export default class Login extends Vue {
         try {
             this.isFacebookLoading = true;
             const token = await loginByFacebook();
-            this.$store.dispatch('login', token);
+            this.$store.dispatch('auth/login', token);
             this.isFacebookLoading = false;
         } catch (error: any) {
             this.toast.error(error.message);
@@ -61,7 +61,7 @@ export default class Login extends Vue {
         try {
             this.isGoogleLoading = true;
             const token = await loginByGoogle();
-            this.$store.dispatch('login', token);
+            this.$store.dispatch('auth/login', token);
             this.isGoogleLoading = false;
         } catch (error: any) {
             this.toast.error(error.message);

src/modules/main/footer/footer.html

@@ -2,13 +2,12 @@
     <strong>
         <span>{{ $t("labels.copyright") }} &copy; {{currentYear}}</span>
         <a href="https://erdkse.com" target="_blank" rel="noopener noreferrer">
-            erdkse.com</a
-        >
+            <span>&nbsp;erdkse.com</span>
+        </a>
         <span>.</span>
     </strong>
-    <span> {{ $t("labels.allRightReserved") }}</span>
     <div class="float-right d-none d-sm-inline-block">
-        <b>{{ $t("labels.version") }} </b>
-        <span>{{version}}</span>
+        <b>{{ $t("labels.version") }}</b>
+        <span>:&nbsp;{{version}}</span>
     </div>
 </footer>

src/modules/main/header/user/user.ts

@@ -10,10 +10,10 @@ import Dropdown from '@/components/dropdown/dropdown.vue';
 })
 export default class User extends Vue {
     get user(): IUser {
-        return this.$store.getters.user;
+        return this.$store.getters['auth/user'];
     }
 
     private logout() {
-        this.$store.dispatch('logout');
+        this.$store.dispatch('auth/logout');
     }
 }

src/modules/main/main.ts

@@ -20,9 +20,9 @@ export default class Main extends Vue {
         this.appElement.classList.add('layout-fixed');
         try {
             const user = await getProfile();
-            this.$store.dispatch('getUser', user);
+            this.$store.dispatch('auth/getUser', user);
         } catch (error) {
-            this.$store.dispatch('logout');
+            this.$store.dispatch('auth/logout');
         }
     }
 

src/modules/main/menu-sidebar/menu-sidebar.ts

@@ -11,7 +11,7 @@ import MenuItem from '@/components/menu-item/menu-item.vue';
 export default class MenuSidebar extends Vue {
     public menu = MENU;
     get user(): IUser {
-        return this.$store.getters.user;
+        return this.$store.getters['auth/user'];
     }
 }
 

src/modules/register/register.ts

@@ -40,7 +40,7 @@ export default class Register extends Vue {
         try {
             this.isAuthLoading = true;
             const token = await registerByAuth(this.email, this.password);
-            this.$store.dispatch('login', token);
+            this.$store.dispatch('auth/login', token);
             this.toast.success('Register succeeded');
             this.isAuthLoading = false;
         } catch (error: any) {
@@ -53,7 +53,7 @@ export default class Register extends Vue {
         try {
             this.isFacebookLoading = true;
             const token = await registerByFacebook();
-            this.$store.dispatch('login', token);
+            this.$store.dispatch('auth/login', token);
             this.isFacebookLoading = false;
         } catch (error: any) {
             this.toast.error(error.message);
@@ -65,7 +65,7 @@ export default class Register extends Vue {
         try {
             this.isGoogleLoading = true;
             const token = await registerByGoogle();
-            this.$store.dispatch('login', token);
+            this.$store.dispatch('auth/login', token);
             this.isGoogleLoading = false;
         } catch (error: any) {
             this.toast.error(error.message);

src/router/index.ts

@@ -109,9 +109,9 @@ const router = createRouter({
 });
 
 router.beforeEach((to, from, next) => {
-    if (to.meta.requiresAuth && !store.getters.token) {
+    if (to.meta.requiresAuth && !store.getters['auth/token']) {
         next('/login');
-    } else if (to.meta.requiresUnauth && !!store.getters.token) {
+    } else if (to.meta.requiresUnauth && !!store.getters['auth/token']) {
         next('/');
     } else {
         next();

src/store/actions.ts → src/store/authModule/actions.ts

@@ -2,14 +2,14 @@ import {IUser} from '@/interfaces/user';
 import router from '@/router/index';
 
 export default {
-    login: (context: any, payload: string): any => {
+    login: (context: any, payload: string): void => {
         context.commit('setToken', payload);
         router.replace('/');
     },
-    getUser: (context: any, payload: IUser): any => {
+    getUser: (context: any, payload: IUser): void => {
         context.commit('setUser', payload);
     },
-    logout: (context: any) => {
+    logout: (context: any): void => {
         context.commit('setToken', null);
         context.commit('setUser', null);
         localStorage.removeItem('gatekeeper_token');

src/store/authModule/getters.ts

@@ -0,0 +1,7 @@
+import {IAuthState} from '@/interfaces/state';
+import {IUser} from '@/interfaces/user';
+
+export default {
+    user: (state: IAuthState): IUser => state.user,
+    token: (state: IAuthState): string => state.token
+};

src/store/authModule/index.ts

@@ -0,0 +1,17 @@
+import mutations from './mutations';
+import actions from './actions';
+import getters from './getters';
+import {IAuthModule} from '@/interfaces/state';
+
+const authModule: IAuthModule = {
+    namespaced: true,
+    state: {
+        token: localStorage.getItem('gatekeeper_token'),
+        user: null
+    },
+    mutations,
+    actions,
+    getters
+};
+
+export default authModule;

src/store/authModule/mutations.ts

@@ -0,0 +1,11 @@
+import {IAuthState} from '@/interfaces/state';
+import {IUser} from '@/interfaces/user';
+
+export default {
+    setToken: (state: IAuthState, payload: string): void => {
+        state.token = payload;
+    },
+    setUser: (state: IAuthState, payload: IUser): void => {
+        state.user = payload;
+    }
+};

src/store/index.ts

@@ -1,15 +1,10 @@
 import {createStore} from 'vuex';
-import mutations from './mutations';
-import actions from './actions';
-import getters from './getters';
+import authModule from './authModule';
+import uiModule from './uiModule';
 
 export default createStore({
-    state: {
-        token: localStorage.getItem('gatekeeper_token'),
-        user: null
-    },
-    mutations,
-    actions,
-    getters,
-    modules: {}
+    modules: {
+        auth: authModule,
+        ui: uiModule
+    }
 });

src/store/uiModule/actions.ts

@@ -0,0 +1,5 @@
+export default {
+    toggleSidebarMenu: (context: any): any => {
+        context.commit('toggleSidebarMenu');
+    }
+};

src/store/uiModule/getters.ts

@@ -0,0 +1,4 @@
+export default {
+    isSidebarMenuCollapsed: (state: any): boolean =>
+        state.isSidebarMenuCollapsed
+};

src/store/uiModule/index.ts

@@ -0,0 +1,15 @@
+import mutations from './mutations';
+import actions from './actions';
+import getters from './getters';
+
+const uiModule = {
+    namespaced: true,
+    state: {
+        isSidebarMenuCollapsed: false
+    },
+    mutations,
+    actions,
+    getters
+};
+
+export default uiModule;

src/store/uiModule/mutations.ts

@@ -0,0 +1,5 @@
+export default {
+    toggleSidebarMenu: (state: any): void => {
+        state.isSidebarMenuCollapsed = !state.isSidebarMenuCollapsed;
+    }
+};