216 lines
4.0 KiB
Markdown
216 lines
4.0 KiB
Markdown
# useArrayData
|
|
|
|
`useArrayData` is a composable function that provides a set of utilities for managing array data in a Vue component. It leverages Pinia for state management and provides various methods for fetching, filtering, and manipulating data.
|
|
|
|
## Usage
|
|
|
|
```javascript
|
|
import { useArrayData } from 'src/composables/useArrayData';
|
|
|
|
const {
|
|
fetch,
|
|
applyFilter,
|
|
addFilter,
|
|
getCurrentFilter,
|
|
setCurrentFilter,
|
|
addFilterWhere,
|
|
addOrder,
|
|
deleteOrder,
|
|
refresh,
|
|
destroy,
|
|
loadMore,
|
|
store,
|
|
totalRows,
|
|
updateStateParams,
|
|
isLoading,
|
|
deleteOption,
|
|
reset,
|
|
resetPagination,
|
|
} = useArrayData('myKey', userOptions);
|
|
```
|
|
|
|
## Parameters
|
|
|
|
### `key`
|
|
|
|
- **Type:** `String`
|
|
- **Description:** A unique key to identify the data store.
|
|
|
|
### `userOptions`
|
|
|
|
- **Type:** `Object`
|
|
- **Description:** An object containing user-defined options for configuring the data store.
|
|
|
|
## Methods
|
|
|
|
### `fetch`
|
|
|
|
Fetches data from the server.
|
|
|
|
#### Parameters
|
|
|
|
- **`options`** : An object with the following properties:
|
|
- `append` (Boolean): Whether to append the fetched data to the existing data.
|
|
- `updateRouter` (Boolean): Whether to update the router with the current filter.
|
|
|
|
#### Returns
|
|
|
|
- **`Promise`** : A promise that resolves with the fetched data.
|
|
|
|
### `applyFilter`
|
|
|
|
Applies a filter to the data.
|
|
|
|
#### Parameters
|
|
|
|
- **`filter`** : An object containing the filter criteria.
|
|
- **`params`** : Additional parameters for the filter.
|
|
- **`fetchOptions`** : Options for the fetch method.
|
|
|
|
#### Returns
|
|
|
|
- **`Promise`** : A promise that resolves with the filtered data.
|
|
|
|
### `addFilter`
|
|
|
|
Adds a filter to the existing filters.
|
|
|
|
#### Parameters
|
|
|
|
- **`filter`** : An object containing the filter criteria.
|
|
- **`params`** : Additional parameters for the filter.
|
|
|
|
#### Returns
|
|
|
|
- **`Promise`** : A promise that resolves with the updated filter and parameters.
|
|
|
|
### `getCurrentFilter`
|
|
|
|
Gets the current filter applied to the data.
|
|
|
|
#### Returns
|
|
|
|
- **`Object`** : The current filter and parameters.
|
|
|
|
### `setCurrentFilter`
|
|
|
|
Sets the current filter for the data.
|
|
|
|
#### Returns
|
|
|
|
- **`Object`** : The current filter and parameters.
|
|
|
|
### `addFilterWhere`
|
|
|
|
Adds a `where` clause to the existing filters.
|
|
|
|
#### Parameters
|
|
|
|
- **`where`** : An object containing the `where` clause.
|
|
|
|
#### Returns
|
|
|
|
- **`Promise`** : A promise that resolves when the filter is applied.
|
|
|
|
### `addOrder`
|
|
|
|
Adds an order to the existing orders.
|
|
|
|
#### Parameters
|
|
|
|
- **`field`** : The field to order by.
|
|
- **`direction`** : The direction of the order (`ASC` or `DESC`).
|
|
|
|
#### Returns
|
|
|
|
- **`Promise`** : A promise that resolves with the updated order.
|
|
|
|
### `deleteOrder`
|
|
|
|
Deletes an order from the existing orders.
|
|
|
|
#### Parameters
|
|
|
|
- **`field`** : The field to delete the order for.
|
|
|
|
#### Returns
|
|
|
|
- **`Promise`** : A promise that resolves when the order is deleted.
|
|
|
|
### `refresh`
|
|
|
|
Refreshes the data by re-fetching it from the server.
|
|
|
|
#### Returns
|
|
|
|
- **`Promise`** : A promise that resolves with the refreshed data.
|
|
|
|
### `destroy`
|
|
|
|
Destroys the data store for the given key.
|
|
|
|
### `loadMore`
|
|
|
|
Loads more data by incrementing the pagination.
|
|
|
|
#### Returns
|
|
|
|
- **`Promise`** : A promise that resolves with the additional data.
|
|
|
|
### `updateStateParams`
|
|
|
|
Updates the state parameters with the given data.
|
|
|
|
#### Parameters
|
|
|
|
- **`data`** : The data to update the state parameters with.
|
|
|
|
### `deleteOption`
|
|
|
|
Deletes an option from the store.
|
|
|
|
#### Parameters
|
|
|
|
- **`option`** : The option to delete.
|
|
|
|
### `reset`
|
|
|
|
Resets the store to its default state.
|
|
|
|
#### Parameters
|
|
|
|
- **`opts`** : An array of options to reset.
|
|
|
|
### `resetPagination`
|
|
|
|
Resets the pagination for the store.
|
|
|
|
## Computed Properties
|
|
|
|
### `totalRows`
|
|
|
|
- **Description:** The total number of rows in the data.
|
|
- **Type:** `Number`
|
|
|
|
### `isLoading`
|
|
|
|
- **Description:** Whether the data is currently being loaded.
|
|
- **Type:** `Boolean`
|
|
|
|
```vue
|
|
<script setup>
|
|
import { useArrayData } from 'src/composables/useArrayData';
|
|
|
|
const userOptions = {
|
|
url: '/api/data',
|
|
limit: 10,
|
|
};
|
|
|
|
const arrayData = useArrayData('myKey', userOptions);
|
|
</script>
|
|
```
|
|
|
|
```
|
|
|
|
```
|