useMap

A hook that can manage the state of Map.

Code demonstration

[
  [
    "msg",
    "hello useMap"
  ],
  [
    123,
    "123"
  ]
]

Basic usage

复制成功!

<template>
  <div>
    <div>
      <vhp-button
        style="margin-left: 8px;"
        @click="() => set(String(Date.now()), new Date().toJSON())"
      >
        Add
      </vhp-button>
      <vhp-button style="margin-left: 8px;" @click="() => setAll([['text', 'this is a new Map']])">
        Set new Map
      </vhp-button>
      <vhp-button style="margin-left: 8px;" @click="() => remove('msg')"> Remove 'msg'</vhp-button>
      <vhp-button style="margin-left: 8px;" @click="() => reset()">Reset</vhp-button>
    </div>
    <div>
      <pre>{{ JSON.stringify(Array.from(map), null, 2) }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { useMap } from 'vue-hooks-plus'

  const [map, { set, setAll, remove, reset }] = useMap<string | number, any>([
    ['msg', 'hello useMap'],
    [123, '123'],
  ])
</script>

API

const [
  map,
  {
    set,
    setAll,
    remove,
    reset,
    get
  }
] = useMap(initialValue?: Iterable<[any, any]>);

Result

Property	Description	Type
map	Map object	Readonly<Ref<Map>>
set	Add item	(key: any, value: any) => void
get	Get item	(key: any) => MapItem
setAll	Set a new Map	(newMap: Iterable<[any, any]>) => void
remove	Remove key	(key: any) => void
reset	Reset to default	() => void
clear	clear Map	() => void

Params

Property	Description	Type	Default
initialValue	Optional, set default value	Iterable<[any, any]>	-

Source

Source · Document · Demo