Vue通过directive自定义指令动态获取数据字典并缓存

业务场景如下：

后端设计了字典表结构如下：

属性	属性名
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文件中使用自定义指令：

注意：dicData不可更改，因为在自定义指令中，默认使用的该data属性，否则会报undefined异常，请仔细对比看directives.js和vue文件的使用

directives.js写法解释：

1. vnode：vnode在此处可以理解为Vue编译生成的虚拟节点，节点既有注册到Vue对象的信息，又有组件信息（vnode.context)。
2. binding：这是组件信息中关于组件属性（attr）的对象，官方文档中写得很清晰，此处不再赘述。
3. binding.value可以获得'TOKEN_STATUS'字符串。
4. vnode.context可以理解为在vue文件的methods方法内的，this，也就是VueComponent对象
5. Vue的数据流管理机制，从vue 1.0版本后，均不允许外部更改组件的props属性，故换个思路，不能更改model-select组件的options属性，那我可以更改options属性绑定的父级组件中的值。这样既满足了vue的数据流props单向流的规则，又可以达到更新数据源的目的。

结束语：

1. 见到新技术的时候，不要去怕深入，新技术的出现，肯定是因为有新需求的出现，新需求出现了，但原有的解决相应问题的解决方案不够用了，那么便会推进新的技术理论的出现和发展。
2. 不要为了学习新技术而学习新技术，因为如果没有具体的去使用新技术，是不那么容易理解的，从问题出发到解决方案和技术。
3. 搞不懂新技术是干什么的，要学会不求甚解，先学会用，然后再相辅相成的大胆猜测，小心求证。
4. 最后一句，干就完了，不怂。