website·Indexed 30 days ago
https://inhiblabcore.github.io/docs/hooksA collection of Vue hooks for state management and common utility logic. Includes hooks for storage (useLocalStorageState, useCookieState, useSessionStorageState), data fetching (useRequest, useFetchs), state manipulation (useImmer, useMap, useSet, useCounter), and browser APIs (useWorker, useResizeObserver, useTitle, useDarkMode).
useRequest is a hook designed to manage network requests with a plugin-based architecture. It provides a wide range of built-in capabilities including automatic and manual requests, polling, debouncing, throttling, re-fetching on window focus, error retries, loading delays, SWR (stale-while-revalidate), caching, infinite scrolling/pagination, parallel requests, and support for custom plugins.The useRequest hook provides a comprehensive set of tools for managing network requests in Vue applications. Its core capabilities include:
useWorker is a Vue Hook that wraps the Web Worker Web API. It allows developers to run computationally expensive functions in a background thread using a simple Promise-based syntax, preventing the main user interface thread from freezing.useRequest and a comprehensive set of utility hooks for common scenarios.useRequest and a comprehensive set of utility hooks for common scenarios.useRequest and a focus on safety and reliability through extensive testing.useRequest is a plugin-based hook designed to manage network requests. It provides a wide range of built-in features to handle common API interaction patterns, including:
useSetState hook is used to manage reactive state of object types. It is designed to be more maintainable than standard state management by supporting partial updates (patching) and destructuring.useWebSocket hook provides a simplified interface for creating and managing a WebSocket connection. It handles connection lifecycle events, automatic reconnection logic, and provides a reactive state of the connection status.const { readyState, sendMessage, disconnect, connect } = useWebSocket('wss://example.com/socket', {
onMessage: (event) => console.log('Received:', event.data),
reconnectLimit: 5,
});The useNetwork hook provides real-time information about the device's network connectivity, including online status, connection type, and estimated bandwidth. It returns a NetworkState object containing the following properties:
online: Boolean indicating if the device is currently online.since: The Date when the online status last changed.rtt: Estimated round-trip time of the current connection (number).type: The type of connection (e.g., 'bluetooth', 'cellular', 'ethernet', 'none', 'wifi', 'wimax', 'other', 'unknown').downlink: Estimated effective bandwidth in megabits per second (Mbps).downlinkMax: Maximum downlink speed in megabits per second (Mbps).saveData: Boolean indicating if the user agent has enabled a data-saver mode.effectiveType: The effective connection type (e.g., 'slow-2g', '2g', '3g', '4g').interface NetworkState {
online?: boolean
since?: Date
rtt?: number
type?: string
downlink?: number
saveData?: boolean
downlinkMax?: number
effectiveType?: string
}
const result: NetworkState = useNetwork()useSessionStorageState hook allows you to store and synchronize application state within the browser's sessionStorage. Its usage and API are identical to those of useLocalStorageState.useFetchs hook is built upon useRequest to enable powerful parallel request capabilities. It is specifically designed to elegantly manage multiple requests to the same URL that carry different parameters. To use fetchRun for manual execution, the manual option must be set to true in the useRequest configuration.