MoreHook

Appearance

Return to top
On this page

useSet

快捷操作 Set 数据结构

Demo

source

setVal: { "Set(3)": [ 1, 2, 3 ] }

Usage

html
<template>
  <div>
    <p>setVal: {{ setVal }}</p>

    <button @click="add(4)">添加 set值</button>
    <button @click="remove(4)">删除 set值</button>
    <button @click="clear">清除全部 set值</button>
    <button @click="reset([7, 8, 9])">重置 set值</button>
  </div>
</template>

<script lang="ts" setup>
import { useSet } from '@morehook/core'

const [setVal, { add, remove, clear, reset }] = useSet([1, 2, 3])
</script>

Type Declarations

typescript
/**
 * add: 添加值
 * remove: 删除某个值
 * has: 判断是否存在
 * clear: 清除全部
 * reset: 重置 set
 */
interface Actions<T> {
  add: (value: T) => void
  remove: (value: T) => void
  has: (value: T) => boolean
  clear: () => void
  reset: (value: T[]) => void
}
/**
 * 操作 Set 数据结构
 * @param initialValue 初始值 - 当传入的初始值发生改变时 Set数据也会变
 * @return [0]: 生成的 set 结构， [1]: 快捷操作 set 结构的函数，参照Actions
 */
export declare function useSet<T = any>(
  initialValue?: T[]
): [state: Ref<Set<any>>, actions: Actions<T>]

Source

Source • Demo • Docs