@jiuyue-/use-dict

useDict

useDict 提供了一种简单高效的方式来使用键值对管理字典数据，支持缓存和异步获取字典数据。

安装

npm install @jiuyue-/use-dict

Usage

首先，通过 setDictData 函数初始化字典数据，该函数会将数据存储在 localStorage 中。然后，您可以使用 useDict 来检索字典数据。

import { useDict, useDictHelper } from '@jiuyue-/use-dict'

const { setDictData } = useDictHelper()

const source = {
  status: [
    { label: '启用', value: '1' },
    { label: '关闭', value: '0' },
  ],
  gender: [
    { label: '男', value: '1' },
    { label: '女', value: '0' },
  ],
}

setDictData(source)

const [statusDict, genderDict] = await useDict(['status', 'gender'])

<template>
  <div>
    <div>status get : {{ statusDict.get() }}</div>
    <div>gender get :{{ genderDict.get() }}</div>
    <div>status getKey 0: {{ statusDict.getKey('0') }}</div>
    <div>gender getKey 1: {{ genderDict.getKey('1') }}</div>
    <div>gender getValue 女: {{ genderDict.getValue('女') }}</div>
    <div>status getValue 启用: {{ statusDict.getValue('启用') }}</div>
    <div>status getValues 启用,关闭: {{ statusDict.getValues('启用,关闭') }}</div>
    <div>gender getKeys 0,1: {{ genderDict.getKeys('0,1') }}</div>
  </div>
</template>

useDict

useDict 函数提供了一种检索和管理字典对象的方式。它允许根据键或标签查找值，访问字典数据，并在需要时动态获取字典。

参数

• names: string | string[]: 要使用的字典名称或字典名称数组。可以是单个字典名称或字典名称的数组。

• options?: useDictOptions: 可选配置对象。

  • fetch?: boolean: 如果设置为 true，将尝试使用先前注册的获取函数（通过 onFetchDict）来获取字典数据。默认值为 false。

返回值

返回一个与提供的 names 对应的字典对象数组。每个字典对象都包括用于与字典数据交互的方法，例如通过标签获取值、通过值查找键以及检索整个字典数据。

字典方法

• get(): 返回字典数据。

  • 示例:

    const [statusDict] = await useDict(['status'])
    console.log(statusDict.get()) 
    // [{ label: '启用', value: '1' }, { label: '关闭', value: '0' }]

• getValue(key: string): 获取字典中与给定标签对应的值。

  • 示例:

    console.log(statusDict.getValue('启用'))  // '1'

• getKey(value: string):获取字典中与给定值对应的key。

  • 示例:

    console.log(statusDict.getKey('1'))  // '启用'

• getKeys(values: string | string[]): 获取values对应的key。

  • 示例:

    console.log(statusDict.getKeys('1,0'))  // ['启用', '关闭']

• getValues(keys: string | string[]): 获取keys对应的value

  • 示例:

    console.log(statusDict.getValues('启用,关闭'))  // ['1', '0']

示例用法

import { useDict } from '@jiuyue-/use-dict'

const [statusDict, genderDict] = await useDict(['status', 'gender'])

console.log(statusDict.get())  // [{ label: '启用', value: '1' }, { label: '关闭', value: '0' }]
console.log(genderDict.get())  // [{ label: '男', value: '1' }, { label: '女', value: '0' }]

console.log(statusDict.getValue('启用'))  // '1'
console.log(genderDict.getKey('1'))  // '男'

获取字典数据

如果在选项中传递了 fetch: true，useDict 将使用注册的获取函数异步检索字典数据。请确保在使用带有 fetch 选项的 useDict 之前，通过 onFetchDict 设置获取函数。

import { useDict, useDictHelper } from '@jiuyue-/use-dict'

const { onFetchDict } =  useDictHelper()

// Register the fetch function
onFetchDict(async (names) => {
  const response = await fetch('/api/dictionary', {
    method: 'POST',
    body: JSON.stringify({ names }),  // Pass the requested dictionary names
  })
  const data = await response.json()
  return data  // Return the dictionary data in useDictData format
})

// Fetch dictionary data using useDict with the fetch option
const [statusDict, genderDict] = await useDict(['status', 'gender'], { fetch: true })

useDictHelper

useDictHelper 函数提供了管理字典数据的实用方法，包括从 localStorage 或外部来源设置、获取和获取字典条目。

Methods

• setDictData(data: useDictData, options?: { sourceKey?: string }):设置字典数据

  • 示例:

    const source = {
      status: [
        { label: '启用', value: '1' },
        { label: '关闭', value: '0' },
      ]
    }
    setDictData(source)

• getDictData(): useDictData: 获取所有字典数据

  • 示例:

    const dictData = getDictData()
    console.log(dictData.status)  // [{ label: '启用', value: '1' }, { label: '关闭', value: '0' }]

• onFetchDict(fn: DictFetchFunction): 注册获取字典数据的请求

  • 示例:

    onFetchDict(async (names) => {
      const response = await fetch('/api/dict', { method: 'POST', body: JSON.stringify(names) })
      return await response.json()
    })

• clearDictData(): 清除缓存数据

  • 示例:

      const { clearDictData } = useDictHelper()
      clearDictData()

• removeFetchDictFn(): 清除注册的请求数据方法

  • 示例:

      const { removeFetchDictFn } = useDictHelper()
      removeFetchDictFn()

示例用法

import { useDictHelper } from '@jiuyue-/use-dict'

const { setDictData, getDictData, onFetchDict } = useDictHelper()

// Set dictionary data
const source = {
  status: [
    { label: '启用', value: '1' },
    { label: '关闭', value: '0' },
  ],
}
setDictData(source)

// Get dictionary data
const dictData = getDictData()

// Register a custom fetch function
onFetchDict(async (names) => {
  const result = await fetch('/api/dictionary', {
    method: 'POST',
    body: JSON.stringify({ names }),
  })
  return await result.json()
})