Client - extend store typing in components

fittrackee_client/src/components/NavBar.vue

@@ -56,12 +56,13 @@
 </template>
 
 <script lang="ts">
-  import { computed, defineComponent, ref } from 'vue'
+  import { ComputedRef, computed, defineComponent, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import { useStore } from 'vuex'
 
   import { IDropdownOption } from '@/interfaces'
-  import { USER_STORE } from '@/store/constants'
+  import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { useStore } from '@/use/useStore'
+  import { IAuthUserProfile } from '@/store/modules/user/interfaces'
   import Dropdown from '@/components/Common/Dropdown.vue'
 
   export default defineComponent({
@@ -75,6 +76,15 @@
       const availableLanguages = availableLocales.map((l) => {
         return { label: l.toUpperCase(), value: l }
       })
+      const authUser: ComputedRef<IAuthUserProfile> = computed(
+        () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
+      )
+      const isAuthenticated: ComputedRef<boolean> = computed(
+        () => store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED]
+      )
+      const language: ComputedRef<string> = computed(
+        () => store.getters[ROOT_STORE.GETTERS.LANGUAGE]
+      )
       let isMenuOpen = ref(false)
       function openMenu() {
         isMenuOpen.value = true
@@ -84,19 +94,15 @@
       }
       function updateLanguage(option: IDropdownOption) {
         locale.value = option.value.toString()
-        store.commit('UPDATE_LANG', option.value)
+        store.commit(ROOT_STORE.MUTATIONS.UPDATE_LANG, option.value)
       }
 
       return {
         availableLanguages,
-        authUser: computed(
-          () => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
-        ),
-        isAuthenticated: computed(
-          () => store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED]
-        ),
+        authUser,
+        isAuthenticated,
         isMenuOpen,
-        language: computed(() => store.state.language),
+        language,
         t,
         openMenu,
         closeMenu,

fittrackee_client/src/components/User/UserForm.vue

@@ -45,10 +45,10 @@
 <script lang="ts">
   import { computed, defineComponent, reactive } from 'vue'
   import { useI18n } from 'vue-i18n'
-  import { useStore } from 'vuex'
 
   import { IFormData } from '@/interfaces.ts'
   import { ROOT_STORE, USER_STORE } from '@/store/constants'
+  import { useStore } from '@/use/useStore'
 
   export default defineComponent({
     name: 'UserForm',

fittrackee_client/src/interfaces.ts

@@ -1,5 +1,5 @@
 export interface IDropdownOption {
-  value: string | number
+  value: string
   label: string
 }
 

fittrackee_client/src/store/modules/root/enums.ts

@@ -1,5 +1,6 @@
 export enum RootGetters {
   ERROR_MESSAGE = 'ERROR_MESSAGE',
+  LANGUAGE = 'LANGUAGE',
 }
 
 export enum RootMutations {

fittrackee_client/src/store/modules/root/getters.ts

@@ -6,4 +6,7 @@ export const getters: GetterTree<IRootState, IRootState> & IRootGetters = {
   [ROOT_STORE.GETTERS.ERROR_MESSAGE]: (state: IRootState) => {
     return state.errorMessage
   },
+  [ROOT_STORE.GETTERS.LANGUAGE]: (state: IRootState) => {
+    return state.language
+  },
 }

fittrackee_client/src/store/modules/root/interfaces.ts

@@ -8,4 +8,5 @@ export interface IRootState {
 
 export interface IRootGetters {
   [ROOT_STORE.GETTERS.ERROR_MESSAGE](state: IRootState): string | null
+  [ROOT_STORE.GETTERS.LANGUAGE](state: IRootState): string
 }

fittrackee_client/src/store/modules/root/types.ts

@@ -1,8 +1,28 @@
+import { Store as VuexStore, CommitOptions } from 'vuex'
+
 import { ROOT_STORE } from '@/store/constants'
-import { IRootState } from '@/store/modules/root/interfaces'
+import { IRootGetters, IRootState } from '@/store/modules/root/interfaces'
 
 export type TRootMutations<S = IRootState> = {
   [ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE](state: S): void
   [ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE](state: S, errorMessage: string): void
   [ROOT_STORE.MUTATIONS.UPDATE_LANG](state: S, language: string): void
 }
+
+export type TRootStoreModule<S = IRootState> = Omit<
+  VuexStore<S>,
+  'commit' | 'getters' | 'dispatch'
+> & {
+  getters: {
+    [K in keyof IRootGetters]: ReturnType<IRootGetters[K]>
+  }
+} & {
+  commit<
+    K extends keyof TRootMutations,
+    P extends Parameters<TRootMutations[K]>[1]
+  >(
+    key: K,
+    payload?: P,
+    options?: CommitOptions
+  ): ReturnType<TRootMutations[K]>
+}

fittrackee_client/src/store/modules/user/types.ts

@@ -1,6 +1,36 @@
+import { Store as VuexStore, CommitOptions, DispatchOptions } from 'vuex'
+
 import { USER_STORE } from '@/store/constants'
-import { IUserState } from '@/store/modules/user/interfaces'
+import {
+  IUserActions,
+  IUserGetters,
+  IUserState,
+} from '@/store/modules/user/interfaces'
 
 export type TUserMutations<S = IUserState> = {
   [USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN](state: S, authToken: string): void
 }
+
+export type TUserStoreModule<S = IUserState> = Omit<
+  VuexStore<S>,
+  'commit' | 'getters' | 'dispatch'
+> & {
+  dispatch<K extends keyof IUserActions>(
+    key: K,
+    payload?: Parameters<IUserActions[K]>[1],
+    options?: DispatchOptions
+  ): ReturnType<IUserActions[K]>
+} & {
+  getters: {
+    [K in keyof IUserGetters]: ReturnType<IUserGetters[K]>
+  }
+} & {
+  commit<
+    K extends keyof TUserMutations,
+    P extends Parameters<TUserMutations[K]>[1]
+  >(
+    key: K,
+    payload?: P,
+    options?: CommitOptions
+  ): ReturnType<TUserMutations[K]>
+}

fittrackee_client/src/store/types.ts

@@ -0,0 +1,10 @@
+import { TRootStoreModule } from '@/store/modules/root/types'
+import { TUserStoreModule } from '@/store/modules/user/types'
+
+type StoreModules = {
+  rootModule: TRootStoreModule
+  userModule: TUserStoreModule
+}
+
+export type Store = TUserStoreModule<Pick<StoreModules, 'userModule'>> &
+  TRootStoreModule<Pick<StoreModules, 'rootModule'>>

fittrackee_client/src/use/useStore.ts

@@ -0,0 +1,7 @@
+import { useStore as VuexStore } from 'vuex'
+
+import { Store } from '@/store/types'
+
+export function useStore(): Store {
+  return VuexStore() as Store
+}