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.

Signature:

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

Returns:

{ 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'})
switchState()

// 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()
switchState()

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