salix-front/docs/composables/useArrayData.md

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

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

<script setup>
import { useArrayData } from 'src/composables/useArrayData';

const userOptions = {
    url: '/api/data',
    limit: 10,
};

const arrayData = useArrayData('myKey', userOptions);
</script>