Pomelo-dictioinary

应用于 Vue3 框架下的数据字典管理模式

特点

1. 模块化管理选项类的公共数据
2. 支持本地定义静态数据 与 接口动态数据，动态数据在使用到时才触发初始化
3. 支持 TS 定义各自的数据类型，且在调用时有清晰提示
4. 数据持久化（localStorage or sessionStorage）
5. 支持以用户ID区分

实例参数

modules 数据模块集合

modules: Record<{string, {
  options: Ref<any[]>; // 数据选项列表，需Ref类型
  handleInit?: () => void; // 初始化方法，选填
  handleClear?: () => void; // 清除数据方法，选填
}}>

persistence 持久化选项，选填

persistence: {
  storage: Storage; // 传入 localStorage 或 sessionStorage
  nameSpace: string; // 项目/模块名称
  userName?: string; // 当前用户名，选填。亦可待后续调用实例方法更新
}

实例属性

• dict - 数据模块集合
• setUser(userName: string) - 设置用户id
• update(property: string, params?: any) - 主动触发该数据模块的初始化方法，第二参数为可选，将会传递给目标模块的 handleInit 方法。该方法返回handleInit 的 Promise。
• clear(property: string) - 主动触发该数据模块的清除方法
• clearAll() - 主动触发所有数据模块的清除方法
• getProperty(property: string) - 获取目标数据，返回Promise。适用于赋予选项默认值的场景

示例

// Demo目录结构
src
├─helpers
│  └─dictionary
│     ├─index.ts
│     └─modules
│        ├─demo1.ts
│        ├─demo2.ts
│        └─...
├─view
├─router
└─App.vue

// @/helpers/dictionary/index.ts 引入各数据模块 & 初始化

import { createPomeloDictionary } from 'pomelo-dictionary';
import { Ultraman, Kamen_Rider } from './modules/demo1';
import { Demo2 } from './modules/demo2';

// dict 数据集合，方便直接调用
// dictInstance 数据字典实例，包含数据本身与各方法
export const { dict, dictInstance } = createPomeloDictionary({
  modules: { // 各数据模块
    Ultraman,
    Kamen_Rider,
    Demo2
  },
  persistence: { // 持久化选项，选填
    storage: window.localStorage, // 传入 localStorage 或 sessionStorage
    nameSpace: 'myProjectName', // 项目/模块名称
    userName: 'Kakarotto_001' // 当前用户名，选填。亦可待后续调用实例方法更新
  }
});

// @/helpers/dictionary/modules/demo1.ts 静态数据

import { ref } from 'vue';

export const Ultraman = {
  options: ref<{
    label: string;
    value: string;
    other: number;
  }[]>([
    { label: '迪迦', value: 'Tiga', other: '圆大古' },
    { label: '戴拿', value: '1', other: '飞鸟信' },
    { label: '盖亚', value: 'Gaia', other: '高山我梦' }
  ])
}

export const Kamen_Rider = {
  options: ref<{
    label: string;
    value: string;
    other: number;
  }[]>([
    { label: '黑日', value: 'BlackSun', name: '南光太郎' },
    { label: '空我', value: 'Kuuga', name: '五代雄介' },
    { label: '亚极陀', value: 'Agito', name: '津上翔一' }
  ])
}

// @/helpers/dictionary/modules/demo2.ts 动态数据

import { ref } from 'vue';
import { someRequestMethod } from '@/api';

export const Demo2 = {
  options: ref<{
    name: string;
    id: number;
  }[]>([]),
  handleInit: function() { // 注意需返回Promise
    return someRequestMethod({ ... })
      .then(res => {
        if (res.code === 200 && Array.isArray(res.data)) {
          this.options = res.data;
        } else {
          throw new Error(res.message);
        }
      })
      .catch(err => {
        this.options = [{ name: '全部', id: 14 }];
        console.error(err.message);
      })
  },
  handleClear: function() {
    this.options = [];
  }
}

// @/App.vue 使用数据
<template>
  <select v-model="selectValue">
    <option
      v-for="item in optionList"
      :key="item.id"
      :value="item.id"
    >
      {{ item.name }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { dict, dictInstance } from '@/helpers/dictionary'; // 引入

dictInstance.setUser('Goku'); // 更新当前用户

const selectValue = ref('');
const optionList = dict.Demo2; // 赋值时触发接口请求，返回 Ref 类型，接口完成后自动更新

// 赋予默认值
dictInstance.getProperty('Demo2').then(res => {
  selectValue.value = res[0].id;
})
</script>