Vue通过directive自定义指令动态获取数据字典并缓存
业务场景如下:后端设计了字典表结构如下:属性属性名idIDcode字典代码name字典名type字典类型description字典描述通过字典类型(type)查询后端接口返回的数据结构如下:{status:true,data:[{id:2,code:"TOKEN_STATUS_01",name:"OPEN"...
·
业务场景如下:
后端设计了字典表结构如下:
属性 | 属性名 |
---|---|
id | ID |
code | 字典代码 |
name | 字典名 |
type | 字典类型 |
description | 字典描述 |
通过字典类型(type)查询后端接口返回的数据结构如下:
{
status:true,
data:[{
id:2,
code:"TOKEN_STATUS_01",
name:"OPEN",
description:"token status",
type:"TOKEN_STATUS"}...]
}
解决办法:
全局directives自定义指令如下:directives.js
import Vue from 'vue'
import api from '../api/api'
const dictType = Vue.directive('dictType', {
priority: 3000,
inserted(el, binding, vnode) {
var dicType = binding.value;
var storedDic = localStorage.getItem('dic-' + dicType);
if (storedDic) {
var cached = eval('(' + storedDic + ')');
Vue.set(vnode.context.dicData,dicType,cached);
} else {
var params = {};
params.type = dicType;
api.getDictionaryByType(params).then(res => {
var options = res.data.map(item => {
return {
text: item.name,
value: item.code
}
});
var jsonStr = JSON.stringify(options);
localStorage.setItem('dic-' + dicType, jsonStr);
Vue.set(vnode.context.dicData,dicType,options);
});
}
}
});
export {
dictType,
}
注意:api.js为封装的axios请求接口,可理解为ajax请求,请忽略api.js,专注理解写法,此处省略了在main.js引用该指令的代码,望知悉。
Vue文件中使用自定义指令:
<model-select
v-dictType="'TOKEN_STATUS'"
:options="dicData['TOKEN_STATUS']?dicData['TOKEN_STATUS']:[]"
class="form-control form-control-sm"
v-model="selectedItems"
placeholder="select item">
</model-select>
注意:dicData不可更改,因为在自定义指令中,默认使用的该data属性,否则会报undefined异常,请仔细对比看directives.js和vue文件的使用
directives.js写法解释:
vnode
:vnode
在此处可以理解为Vue
编译生成的虚拟节点,节点既有注册到Vue
对象的信息,又有组件信息(vnode.context
)。binding
:这是组件信息中关于组件属性(attr
)的对象,官方文档中写得很清晰,此处不再赘述。binding.value
可以获得'TOKEN_STATUS'
字符串。vnode.context
可以理解为在vue
文件的methods方法内的,this
,也就是VueComponent
对象Vue
的数据流管理机制,从vue 1.0
版本后,均不允许外部更改组件的props
属性,故换个思路,不能更改model-select
组件的options
属性,那我可以更改options
属性绑定的父级组件中的值。这样既满足了vue
的数据流props
单向流的规则,又可以达到更新数据源的目的。
结束语:
- 见到新技术的时候,不要去怕深入,新技术的出现,肯定是因为有新需求的出现,新需求出现了,但原有的解决相应问题的解决方案不够用了,那么便会推进新的技术理论的出现和发展。
- 不要为了学习新技术而学习新技术,因为如果没有具体的去使用新技术,是不那么容易理解的,从问题出发到解决方案和技术。
- 搞不懂新技术是干什么的,要学会不求甚解,先学会用,然后再相辅相成的大胆猜测,小心求证。
- 最后一句,干就完了,不怂。
更多推荐
已为社区贡献4条内容
所有评论(0)