v3hooks --useMap

import { ref, Ref, markRaw } from 'vue';


type MapValue = readonly (readonly [any, any])[]

interface Actions<T>{
    set: ( key: string, value: T)=> void,
    get: ( key: string )=> T,
    remove: ( key: string )=> void,
    has: ( key: string )=> boolean,
    clear: ()=> void,
    setAll: (newMap: MapValue)=> void;
    reset: ()=> void,
}

function useMap <T = any>(initialValue?:MapValue) : [
    state: Ref<Map<any,any>>,
    actions: Actions<T>
]

function useMap<T = any>(initialValue?:MapValue){
    
    const initialMap = initialValue ? new Map(initialValue) :  new Map();
    const state = ref(initialMap) as Ref<Map<any,any>>;

    const actions:Actions<T> = {
        set:( key: any, value: T )=>{
            state.value.set(key,value);
        },
        get:( key: any )=>{
            return state.value.get(key);
        },
        remove: ( key: any )=>{
            state.value.delete( key );
        },
        has: ( key: any )=> state.value.has(key),
        clear: ()=> state.value.clear(),
        setAll: ( newMap: MapValue )=>{
            state.value = new Map(newMap);    
        },
        reset: ()=> state.value = initialMap
    };

    return [ state, markRaw(actions) ]
};

export default useMap

useMap

一个可以管理 Map 类型状态的 Hook。

使用Demo

<template>
  <div class="hello">
    <div>
      <p> value:{{ state }}</p>
      <button @click="()=> set('1',Math.random())">set</button>
      <button @click="()=> remove('1')">remove</button>
      <button @click="()=> setAll([ ['1','111'], ['2','2222'] ])">setAll</button>
    </div>
    
  </div>
</template>

<script lang="ts">
import { useSet, useMap } from "../../../dist/index.js";

export default {
  
  setup() {
    const [state, { set, setAll, remove }] = useMap([
      ['1','321']
    ]);
    return {
      state,
      set,
      setAll,
      remove
    };
  },
};
</script>

useMap接受一个 Map 可接受的参数, 并导出以下方法.

Api

type MapValue = readonly (readonly [any, any])[]

interface Actions<T>{
    set: ( key: string, value: T)=> void,
    get: ( key: string )=> T,
    remove: ( key: string )=> void,
    has: ( key: string )=> boolean,
    clear: ()=> void,
    setAll: (newMap: MapValue)=> void;
    reset: ()=> void,
}

function useMap <T = any>(initialValue?:MapValue) : [
    state: Ref<Map<any,any>>,
    actions: Actions<T>
]

Params

参数	说明	类型	默认值
initialValue	可选项，传入默认的 Map 参数	readonly[any,any]	-

Result

参数	说明	类型
state	Map 对象	Map
set	添加元素	( key: string, value: T)=> void
get	移除元素	( key: string )=> T
remove	移除元素	( key: string )=> void
has	判断是否存在元素	( key: string )=> boolean
clear	清空Map	()=> void
setAll	添加并生成一个新的 Map 对象	(newMap: (readonly [any, any])[])=> void
reset	重置为默认值	()=> void