repository·master·Indexed 24 days ago
https://github.com/inhiblabcore/vue-hooks-plusA high-performance collection of Vue 3 hooks supporting SSR and TypeScript. It features a powerful useRequest middle tier for network requests, component hooks that encapsulate both logic and UI, and specialized utilities like useImmer for immutable state manipulation and useWorker. The library supports on-demand loading, CDN usage, and automatic imports via VueHooksPlusResolver for Vite and Webpack.
useRequest middle tier for handling network requests and supports on-demand loading to minimize bundle size.useImmer hook allows you to use immer within a Vue application to manage and manipulate state using a mutable-style syntax that produces immutable updates.The project is undergoing a comprehensive upgrade across four main phases to improve security, testing, Vue 3.5 compatibility, and source code security.
Upgrade Phases:
use-url-state, use-immer, use-worker, use-request-plugins, and resolvers.peerDependencies to ^3.5 and refactoring internal implementations using new Vue 3.5 APIs (e.g., onWatcherCleanup, watch pause/resume).useExternal (script injection), useCookieState, and use-worker communication.useImmer hook allows you to use immer within a Vue application to simplify state manipulation. It provides a way to work with immutable state using a mutable-style syntax, which is managed by the underlying immer library.useRequest) to manage state and lifecycle, but exposes that state through Vue slots, allowing you to reuse complex behaviors and layouts across your application.To reset the list to the first page (e.g., when a filter changes), use the reload method.
Pro-tip: Use the reloadDeps option to automatically trigger a reload whenever specific dependencies change. This acts as a syntax sugar for watching dependencies and calling reload() manually.
To perform local updates without a full network reload (e.g., deleting a single item from the list), use the mutate method. You can pass a new version of the data object to mutate(newData) to replace the current state.
The refreshDeps option in useRequest allows you to specify reactive dependencies that, when changed, will automatically re-trigger the request. This functions similarly to Vue's watch mechanism but is integrated into the useRequest lifecycle.
Important Note: refreshDeps only takes effect when the manual option is NOT set to true.
The useRequest hook provides a refreshDeps option to automatically re-trigger requests when reactive dependencies change. This serves as a replacement for the standard Vue watch mechanism within the context of a request.
Important Constraint:
refreshDeps only works in automatic mode. If manual is set to true, dependency refreshing will not trigger new requests.
The mutate function allows you to immediately update the data returned by useRequest without waiting for a network request to complete. This provides a snappier UI experience.
mutate(newData): Replaces the current data with newData.mutate((oldData) => newData): Updates data based on its previous state.To ensure data integrity if a background update fails, enable rollbackOnError. If the actual service call fails, the data will automatically revert to its previous state.
The useBroadcastChannelPlugin is a plugin for useRequest that enables broadcasting and synchronizing useRequest state (such as loading, data, or errors) between browser tabs or windows from the same origin. It uses the broadcast-channel API to facilitate this communication.
import { useRequest } from 'vue-hooks-plus'
import { useBroadcastChannelPlugin } from '@vue-hooks-plus/use-request-plugins'
// Example usage within a component
useRequest(
service,
{
broadcastChannel: 'my-sync-channel',
},
[useBroadcastChannelPlugin],
)You can perform side effects at different stages of the asynchronous request lifecycle using these hooks:
onBefore: Triggered before the request starts.onSuccess: Triggered when the request resolves successfully.onError: Triggered when the request is rejected.onFinally: Triggered when the request is completed (regardless of success or failure).