Client - extend store typing in components

This commit is contained in:
Sam 2021-08-11 22:12:02 +02:00
parent a20a646687
commit 72db7afe44
10 changed files with 93 additions and 15 deletions

View File

@ -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,

View File

@ -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',

View File

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

View File

@ -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 {

View File

@ -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
},
} }

View File

@ -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
} }

View File

@ -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]>
}

View File

@ -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]>
}

View 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'>>

View File

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