# 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>
```

```

```