Client - extend store typing in components
This commit is contained in:
parent
a20a646687
commit
72db7afe44
@ -56,12 +56,13 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, ref } from 'vue'
|
import { ComputedRef, computed, defineComponent, ref } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useStore } from 'vuex'
|
|
||||||
|
|
||||||
import { IDropdownOption } from '@/interfaces'
|
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'
|
import Dropdown from '@/components/Common/Dropdown.vue'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -75,6 +76,15 @@
|
|||||||
const availableLanguages = availableLocales.map((l) => {
|
const availableLanguages = availableLocales.map((l) => {
|
||||||
return { label: l.toUpperCase(), value: 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)
|
let isMenuOpen = ref(false)
|
||||||
function openMenu() {
|
function openMenu() {
|
||||||
isMenuOpen.value = true
|
isMenuOpen.value = true
|
||||||
@ -84,19 +94,15 @@
|
|||||||
}
|
}
|
||||||
function updateLanguage(option: IDropdownOption) {
|
function updateLanguage(option: IDropdownOption) {
|
||||||
locale.value = option.value.toString()
|
locale.value = option.value.toString()
|
||||||
store.commit('UPDATE_LANG', option.value)
|
store.commit(ROOT_STORE.MUTATIONS.UPDATE_LANG, option.value)
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
availableLanguages,
|
availableLanguages,
|
||||||
authUser: computed(
|
authUser,
|
||||||
() => store.getters[USER_STORE.GETTERS.AUTH_USER_PROFILE]
|
isAuthenticated,
|
||||||
),
|
|
||||||
isAuthenticated: computed(
|
|
||||||
() => store.getters[USER_STORE.GETTERS.IS_AUTHENTICATED]
|
|
||||||
),
|
|
||||||
isMenuOpen,
|
isMenuOpen,
|
||||||
language: computed(() => store.state.language),
|
language,
|
||||||
t,
|
t,
|
||||||
openMenu,
|
openMenu,
|
||||||
closeMenu,
|
closeMenu,
|
||||||
|
@ -45,10 +45,10 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, reactive } from 'vue'
|
import { computed, defineComponent, reactive } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useStore } from 'vuex'
|
|
||||||
|
|
||||||
import { IFormData } from '@/interfaces.ts'
|
import { IFormData } from '@/interfaces.ts'
|
||||||
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
import { ROOT_STORE, USER_STORE } from '@/store/constants'
|
||||||
|
import { useStore } from '@/use/useStore'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: 'UserForm',
|
name: 'UserForm',
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
export interface IDropdownOption {
|
export interface IDropdownOption {
|
||||||
value: string | number
|
value: string
|
||||||
label: string
|
label: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
export enum RootGetters {
|
export enum RootGetters {
|
||||||
ERROR_MESSAGE = 'ERROR_MESSAGE',
|
ERROR_MESSAGE = 'ERROR_MESSAGE',
|
||||||
|
LANGUAGE = 'LANGUAGE',
|
||||||
}
|
}
|
||||||
|
|
||||||
export enum RootMutations {
|
export enum RootMutations {
|
||||||
|
@ -6,4 +6,7 @@ export const getters: GetterTree<IRootState, IRootState> & IRootGetters = {
|
|||||||
[ROOT_STORE.GETTERS.ERROR_MESSAGE]: (state: IRootState) => {
|
[ROOT_STORE.GETTERS.ERROR_MESSAGE]: (state: IRootState) => {
|
||||||
return state.errorMessage
|
return state.errorMessage
|
||||||
},
|
},
|
||||||
|
[ROOT_STORE.GETTERS.LANGUAGE]: (state: IRootState) => {
|
||||||
|
return state.language
|
||||||
|
},
|
||||||
}
|
}
|
||||||
|
@ -8,4 +8,5 @@ export interface IRootState {
|
|||||||
|
|
||||||
export interface IRootGetters {
|
export interface IRootGetters {
|
||||||
[ROOT_STORE.GETTERS.ERROR_MESSAGE](state: IRootState): string | null
|
[ROOT_STORE.GETTERS.ERROR_MESSAGE](state: IRootState): string | null
|
||||||
|
[ROOT_STORE.GETTERS.LANGUAGE](state: IRootState): string
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,28 @@
|
|||||||
|
import { Store as VuexStore, CommitOptions } from 'vuex'
|
||||||
|
|
||||||
import { ROOT_STORE } from '@/store/constants'
|
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> = {
|
export type TRootMutations<S = IRootState> = {
|
||||||
[ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE](state: S): void
|
[ROOT_STORE.MUTATIONS.EMPTY_ERROR_MESSAGE](state: S): void
|
||||||
[ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE](state: S, errorMessage: string): void
|
[ROOT_STORE.MUTATIONS.SET_ERROR_MESSAGE](state: S, errorMessage: string): void
|
||||||
[ROOT_STORE.MUTATIONS.UPDATE_LANG](state: S, language: 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]>
|
||||||
|
}
|
||||||
|
@ -1,6 +1,36 @@
|
|||||||
|
import { Store as VuexStore, CommitOptions, DispatchOptions } from 'vuex'
|
||||||
|
|
||||||
import { USER_STORE } from '@/store/constants'
|
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> = {
|
export type TUserMutations<S = IUserState> = {
|
||||||
[USER_STORE.MUTATIONS.UPDATE_AUTH_TOKEN](state: S, authToken: string): void
|
[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]>
|
||||||
|
}
|
||||||
|
10
fittrackee_client/src/store/types.ts
Normal file
10
fittrackee_client/src/store/types.ts
Normal file
@ -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'>>
|
7
fittrackee_client/src/use/useStore.ts
Normal file
7
fittrackee_client/src/use/useStore.ts
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { useStore as VuexStore } from 'vuex'
|
||||||
|
|
||||||
|
import { Store } from '@/store/types'
|
||||||
|
|
||||||
|
export function useStore(): Store {
|
||||||
|
return VuexStore() as Store
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user