stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useArrayUnique.md

category

category
Array

useArrayUnique

reactive unique array

Usage

Use with array of multiple refs

import { useArrayUnique } from '@vueuse/core';

const item1 = ref(0);
const item2 = ref(1);
const item3 = ref(1);
const item4 = ref(2);
const item5 = ref(3);
const list = [item1, item2, item3, item4, item5];
const result = useArrayUnique(list);
// result.value: [0, 1, 2, 3]
item5.value = 1;
// result.value: [0, 1, 2]

Use with reactive array

import { useArrayUnique } from '@vueuse/core';

const list = reactive([1, 2, 2, 3]);
const result = useArrayUnique(list);
// result.value: [1, 2, 3]

list.push(1);
// result.value: [1, 2, 3]

Use with custom function

import { useArrayUnique } from '@vueuse/core';

const list = reactive([
  { id: 1, name: 'foo' },
  { id: 2, name: 'bar' },
  { id: 1, name: 'baz' },
]);

const result = useArrayUnique(list, (a, b) => a.id === b.id);
// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]

list.push({ id: 1, name: 'qux' });
// result.value: [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }]

Type Declarations

export type UseArrayUniqueReturn<T = any> = ComputedRef<T[]>;
/**
 * reactive unique array
 * @see https://vueuse.org/useArrayUnique
 * @param list - the array was called upon.
 * @param compareFn
 * @returns A computed ref that returns a unique array of items.
 *
 * @__NO_SIDE_EFFECTS__
 */
export declare function useArrayUnique<T>(
  list: MaybeRefOrGetter<MaybeRefOrGetter<T>[]>,
  compareFn?: (a: T, b: T, array: T[]) => boolean,
): UseArrayUniqueReturn<T>;