命名空间

项目中可能会出现来自不同系统的字典数据源, 这样可能会存在不同的字典数据源会有不同的配置项, 为了避免命名冲突, 此时可以使用命名空间。

没使用命名空间时, 实际上会把配置项设置给default的命名空间, 当使用useDict时没指定命名空空间时也会使用default的命名空间的配置项。

使用

注册插件

import { setupDictPlugin } from '@anyfu/dict-vue';

app.use(
  setupDictPlugin({
    default: {
      baseURL: 'https://useful-event-b654f7bc61.strapiapp.com',
      url: '/api/dict/base',
    },
    external: {
      baseURL: 'https://useful-event-b654f7bc61.strapiapp.com',
      url: '/api/external-dict'
    },
  })
);

指定命名空间字典

// 使用 as const 才会把数组当作 只读元组（readonly tuple）
const codes = ['DICT_STYLES', 'DICT_REASON'] as const;

const { loading, data, dictMap } = useDict(codes, { namespace: 'external' });
console.info(loading, data, dictMap);

演示

基础使用

useDict 支持指定命名空间, 指定后会使用对应的命名空间配置项。

loading

高级使用

命名空间的使用也支持fetchDict方法中的配置项覆盖全局配置项。像下面例子覆盖setupDictPlugin时的url配置。

const { loading, data, dictMap } = useDict('DICT_REASON', {
  namespace: 'external',
  dictManagerOptions: {
    url: '/api/dict/external-overwrite'
  },
  onFetchDictError: (status, message, _error) => ElMessage.error({ message: `[${status}] ${message}`, grouping: true })
});

loading

TIP

覆盖的url: '/api/dict/external-overwrite'没有配置响应的接口, 会导致接口请求404, 从而触发onFetchDictError方法。