若依vue分离版——字典源码浅析

最新推荐文章于 2025-04-03 07:00:00 发布

原创

最新推荐文章于 2025-04-03 07:00:00 发布 · 495 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

// 字典数据组件
import DictData from "@/components/DictData";
DictData.install();

组件在main.js中使用注册，但是初始化install只会使用一次，那么组件是怎么在每次可以使用dicts的时候，调用request达到有缓存字典字段的时候就使用缓存的呢？（install传入了额外参数{metas:xxx}）

import DataDict from '@/utils/dict'
function install() {
  Vue.use(DataDict, {
    metas: {
      '*': {
        labelField: 'dictLabel',
        valueField: 'dictValue',
        request(dictMeta) {
          const storeDict = searchDictByKey(store.getters.dict, dictMeta.type)
          if (storeDict) {
            return new Promise(resolve => { resolve(storeDict) })
          } else {
            return new Promise((resolve, reject) => {
              getDicts(dictMeta.type).then(res => {
                store.dispatch('dict/setDict', { key: dictMeta.type, value: res.data })
                resolve(res.data)
              }).catch(error => {
                reject(error)