- 入口：查看全局入口文件
main.js，DictData.install()是字典功能的入口位置。
function install() {
Vue.use(DataDict, {//额外参数
metas: {
'*': {
labelField: 'dictLabel',
valueField: 'dictValue',
request(dictMeta) {
return getDicts(dictMeta.type).then(res => res.data)
},
},
},
})
}
install全局注册了一个插件 DataDict，同时传入了额外参数 {meta:xxx}，目的是将DataDict插件对应的参数进行赋值。
* DataDict插件：因为该插件本身是个function，所以Vue.use会直接将function视为 install()方法执行。
export default function (Vue, options) {
mergeOptions(options)
Vue.mixin({...})
}
首先执行 mergeOptions(options),目的是将传入的额外参数与DictOptions合并。具体实现是通过递归调用 mergeRecursive(source,target)，将DictOptions的属性覆盖或者添加。 其次注册全局混入 Vue.mixin ，给所有 Vue 实例添加了 data() 和 created() 方法。
Vue.mixin({
data(){
const dict = new Dict()
dict.owner = this
return {dict}
},
created(){
....
this.dict.init(this.$options.dicts).then(()=>{...})
}
})
data (): 每个 Vue 页面创建一个 Dict。 created(): 调用Dict.init(dicts)方法，传入每个vue页面声明的dicts数组(例如 dicts['sys_normal_disable'])。(额外补充：init().then(….)里的方法个人认为是为了拓展性，因为我全局查找也没有看到任何地方用到。)
Original: https://www.cnblogs.com/allworldg/p/ruoyi-dict-learn.html
Author: allworldg
Title: Ruoyi字典源码学习
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/643668/
转载文章受原作者版权保护。转载请注明原作者出处！