vue-memoize-dict

Vue 字典缓存，支持 Vue2 和 Vue3。

• 安装
• 新建字典对象
• API
  • get()
  • tree()
  • item()
  • label()
  • treeLabel()
  • labels()
  • fetch()
  • load()
  • delete()
  • clear()

安装

$ pnpm add vue-memoize-dict

新建字典对象

dict.ts:

import { MemoizeDict } from "vue-memoize-dict";

type DictData = {
  name: string;
  id: number;
  parent_id: number;
};

export const remoteDict = new MemoizeDict<DictData>({
  fieldNames: {
    label: "name",
    value: "id",
    parent: "parent_id",
  },
  config: new Proxy({},
    {
      get: (_, key: string) => ({
        data: async () => {
          return fetch(`./static/${key}.json?${Date.now()}`)
            .then((res) => res.json());
        },
      }),
    }
  ),
});

declare global {
  interface Window {
    remoteDict: MemoizeDict<DictData>;
  }
}

if (typeof window !== 'undefined') {
  window.remoteDict = remoteDict;
}

API

get()

<template>
  <!-- <pre>{{ JSON.stringify(remoteDict.get("food"), null, 2) }}</pre> -->
  <select>
    <option
      v-for="item in remoteDict.get('food')"
      :key="item.id"
      :value="item.id"
    >
      {{ item.name }}
    </option>
  </select>
</template>
<script setup lang="ts">
import { remoteDict } from "./dict";
</script>

tree()

<template>
  <TreeComp :data="remoteDict.tree('food')" />
  <button @click="showAlert(remoteDict.tree('food'))">
    Show Tree
  </button>
</template>
<script setup lang="ts">
import { remoteDict } from "./dict";
import { defineComponent, h } from "vue";

function showAlert(data: any) {
  alert(JSON.stringify(data, null, 4));
}

const TreeComp = defineComponent({
  props: {
    data: {
      type: Array as () => ReturnType<typeof remoteDict.tree>,
      required: true,
    },
  },
  setup(props) {
    function renderItem(): any {
      return props.data.map((item) => {
        return h("li", [
          h("span", item.name),
          item.children && h(TreeComp, { data: item.children }),
        ]);
      });
    }

    return () => {
      return h("ul", renderItem());
    };
  },
});
</script>

item()

<template>
  {{ remoteDict.item("food", 10) }}
</template>
<script setup lang="ts">
import { remoteDict } from "./dict";
</script>

label()

10

<template>
  {{ remoteDict.label("food", 10) }}
</template>
<script setup lang="ts">
import { remoteDict } from "./dict";
</script>

treeLabel()

分隔符暂时是 -

12
11

<template>
  {{ remoteDict.treeLabel("food", 12) }}
  <br />
  {{ remoteDict.treeLabel("food", 11).replace(/-/g, ",") }}
</template>
<script setup lang="ts">
import { remoteDict } from "./dict";
</script>

labels()

10,20

<template>
  {{ remoteDict.labels("food", [10, 20]).join(",") }}
</template>
<script setup lang="ts">
import { remoteDict } from "./dict";
</script>

fetch()

remoteDict.fetch("food").then((res) => {
  console.log(res);
});

load()

remoteDict.load("food").then((res) => {
  console.log(res);
});

delete()

remoteDict.delete("food");

clear()

remoteDict.clear();