import { matchedRouteKey } from 'vue-router' ; import { ActionContext , ActionTree , CommitOptions , DispatchOptions , GetterTree , Module , MutationTree , Store as VuexStore } from 'vuex' ; import { RootState } from '../index' ; export enum AppMutatinContants { TOGGLE_SIDEBAR = 'TOGGLE_SIDEBAR' , CLOSE_SIDEBAR = 'CLOSE_SIDEBAR' , TOGGLE_DEVICE = 'TOGGLE_DEVICE' , STE_SIZE = 'STE_SIZE' } export enum AppActionContants { TOGGLE_SIDEBAR = 'app/toggleSideBar' } export interface SideBar { opened : boolean ; withoutAnimation : boolean ; } type Device = 'desktop' | 'mobile' ; type Size = '' | 'large' | 'medium' | 'small' | 'mini' ; export type AppState = { sidebar : SideBar ; device : Device ; size : Size ; } ; const state = { sidebar : { opened : sessionStorage . getItem ( 'sidebarStatus' ) ? ! ! Number ( sessionStorage . getItem ( 'sidebarStatus' ) ) : true , withoutAnimation : false } , device : 'desktop' , size : sessionStorage . getItem ( 'size' ) as Size || 'small' } ; interface AppMutation { [ AppMutatinContants . TOGGLE_SIDEBAR ] ( state ) : void ; [ AppMutatinContants . CLOSE_SIDEBAR ] ( state , withoutAnimation ) : void ; [ AppMutatinContants . TOGGLE_DEVICE ] ( state , device ) : void ; [ AppMutatinContants . STE_SIZE ] ( state , size ) : void ; } const mutations = { [ AppMutatinContants . TOGGLE_SIDEBAR ] : state => { state . sidebar . opened = ! state . sidebar . opened ; state . sidebar . withoutAnimation = false ; if ( state . sidebar . opened ) { sessionStorage . setItem ( 'sidebarStatus' , '1' ) ; } else { sessionStorage . setItem ( 'sidebarStatus' , '0' ) ; } } , [ AppMutatinContants . CLOSE_SIDEBAR ] : ( state , withoutAnimation ) => { sessionStorage . setItem ( 'sidebarStatus' , '0' ) ; state . sidebar . opened = false ; state . sidebar . withoutAnimation = withoutAnimation ; } , [ AppMutatinContants . TOGGLE_DEVICE ] : ( state , device ) => { state . device = device ; } , [ AppMutatinContants . STE_SIZE ] : ( state , size ) => { state . size = size ; sessionStorage . setItem ( 'size' , size ) ; } } ; type AugmentedActionContext = { commit < K extends keyof AppMutation > ( key , payload ? ) : ReturnType < AppMutation [ K ] > ; } & Omit < ActionContext < AppState , RootState > , 'commit' > ; interface AppAction { toggleSideBar ( { commit } ) : void ; closeSideBar ( { commit } , { withoutAnimation } ) : void ; toggleDevice ( { commit } , device ) : void ; setSize ( { commit } , size ) : void ; } const actions = { toggleSideBar ( { commit } ) { commit ( AppMutatinContants . TOGGLE_SIDEBAR ) ; } , closeSideBar ( { commit } , { withoutAnimation } ) { commit ( AppMutatinContants . CLOSE_SIDEBAR , withoutAnimation ) ; } , toggleDevice ( { commit } , device ) { commit ( AppMutatinContants . TOGGLE_DEVICE , device ) ; } , setSize ( { commit } , size ) { commit ( AppMutatinContants . STE_SIZE , size ) ; } } ; export type AppStore < S = AppState > = Omit < VuexStore < S > , 'commit' | 'dispatch' > & { commit < K extends keyof AppMutation , P extends Parameters < AppMutation [ K ] > [ 1 ] > ( key , payload ? , options ? ) : ReturnType < AppMutation [ K ] > ; } & { dispatch < K extends keyof AppAction , P extends Parameters < AppAction [ K ] > [ 1 ] > ( key , payload ? , options ? ) : ReturnType < AppAction [ K ] > ; } ; export const AppModule = { namespaced : true , state , mutations , actions } ;