Home > @shopware-pwa/composables > useUIState

# useUIState() function

This API is provided as a preview for developers and may change based on feedback that we receive. Do not use this API in a production environment.

Simple state management for UI purposes.


export declare function useUIState(params?: {
    stateName?: Ref<string> | string;
}): {
    isOpen: ComputedRef<boolean>;
    switchState: (to?: boolean) => void;

# Parameters

Parameter Type Description
params { stateName?: Ref<string> | string; }


{ isOpen: ComputedRef<boolean>; switchState: (to?: boolean) => void; }

# Remarks

If you pase stateName on composable invocation (ex. useUIState({stateName: 'sidebarCart'})), then state is shared between all instances with this key. Otherwise state is local, so multiple useUIState() will not share state

# Example

// Component1
const {isOpen, switchState} = useUIState({stateName: 'SIDEBAR_STATE'})

// Component 2
const {isOpen} = useUIState({stateName: 'SIDEBAR_STATE'})
// isOpen will be true

If you'll not use KEY on composable init, then state is only local

// Component1
const {isOpen, switchState} = useUIState()

// Component 2
const {isOpen} = useUIState()
// isOpen will be false