一、故事背景

接手一个以若依模板搭建的前端工程，对于这个模板懂得都懂，无意中发现页面刷新的时候，从字典获取的数据，竟然会丢失，但是从上个页面依次点进来的却不会丢失，此时的心情就四个字，头皮发麻！

二、排查过程

1. 勘查自己写的有没有问题

• 在vue的mounted生命周期里使用nextTick方式加载数据。例如：

    this.$nextTick(() => { this.addDialogForm[0].options = this.dict.type.sys_channel_type })
  

1. 乍眼看没啥问题，心里嘀咕是不是换个生命周期？换成created？试试，现象依旧出现。
2. 难道是这边没获取到值？一般这种情况，要么就是响应丢失，要么就是真的没拿到值。打印一下，确实是没拿到值，这什么情况，难道是若依这边字典代码逻辑写的有问题？
3. 啥也别说了，去看若依写的这坨字典代码逻辑吧

2. 查看源码

找到utils/dict，可以看到index.js这个入口文件，点开逻辑很简单，合并数据，至于什么数据，先不管，下面就是一个混入。data里面构造了一个dist这也解释了业务页面中为啥可以使用this.dict获取字典了。下面是个created生命周期。

• 重点源码

		this.dict.init(this.$options.dicts).then(() => {
	        options.onReady && options.onReady(this.dict)
	        this.$nextTick(() => {
	          this.$emit('dictReady', this.dict)
	          if (this.$options.methods && this.$options.methods.onDictReady instanceof Function) {
	            this.$options.methods.onDictReady.call(this, this.dict)
	          }
	        })
	      })

• 原来是我现在这种写法，本来就有问题，规范的写法，已经在这给出了。只能说，一开始往里面加业务代码的人，也没搞明白，应该怎么正确获取字典数值。导致后面所有开发人员依葫芦画瓢，全写错了，且至今还没有发现问题，简直，牛掰！
• 正确写法，在method属性中添加一个onDictReady回调方法。

  onDictReady() {
    this.addDialogForm[0].options = this.dict.type.sys_channel_type
  }
  

• 测试，完美解决。