正常来说，一个vue项目前端需要用到的一些翻译字典对象保存方式一般有多重，

1. 新建js文件方式保存
2. 通过vuex方式保存
3. 通过sessionStorage保存
4. 通过localStorage保存

正常以上几点的保存方式是够用了。
但是，当有字典不能以文件方式保存并且字典量很多很大时候，要考虑的事情就多了。
首选最新考虑存储的地方是vuex跟session，安全性会相对高一些，其次就需要考虑如果量大的问题。当字典数据量超过5MB的话，那session就有些难受了。而vuex持久存储也是需要先存Storage中再取回到内存中用。那么怎么比较好解决这个量大且不能以文件存储方式呢。

思路：
（字典都是从后端调接口获取）

1. 还是通过session方式储存，额外有的看需求要不要再存储到vuex中
2. 给session增加存储过期时间
3. 给session增加存储量是否接近5MB存储上限判断
4. 字典通过后端调接口获取
   4.1 获取地方 1.通过路由跳转时beforeRouteEnter回调中调用跟判断
   4.2 获取地方 2.通过页面created 回调中调用跟判断(有的是弹框子组件或者form表单并没有进行路由跳转)
5. 由于基本每个菜单页面都要使用到字典，所以考虑通过混入mixin方式
6. #由于字典一般用于选项跟翻译，所以需要考虑是否使用 async/await方式来同步代码，确保字典数据先取到再进入页面。是否使用各有利弊。

混入代码：

1. window.g.SESSION_TIMEOUT 是定义全局变量，可配置
2. DICE_KEYS 是存储字典key的数组
3. SESSION_TIMEOUT 为字典过期时间

export default function (dictKeys = []) {
   
  let _isBeforeRouteEnterDictQuery = false
  return {
   
    data() {
   
      return {
   
        m_dictsFin: false,
        m_dicts: {
   }
      }
    },

    provide: function () {
   
      return {
   
        m_dicts: this.m_dicts
      }
    },
    methods: {
   
      getSessionStorageSize(){
   
        let obj = ''
        let size = 0
        if(!window.sessionStorage){
   
          try {
   
            throw Error('浏览器不支持sessionStorage')
          } catch (error) {
   
            console.log(error)
          }
        }else {
   
          obj = window.sessionStorage
        }
        if(obj !== ''){
   
          for(item in obj){
   
            if(obj.hasOwnProperty(item)){
   
              size += obj.getItem(item).length
            }
          }
        }
        let val = (size/1024).toFixed(2) //单位KB 5MB = 1024*5 = 5120kB
        // 1024 * 4.5 = 4608
        if(val > 4608){
    //如果存储大小超过4.5MB则需清空KEY重新获取过
          return true
        }else {
   
          return false
        }
      },
      setPageConfig(res,vm){
   
        const list = res?.data?.data || []
        store.dispatch('dynamicDicts', list)
        const pathAllDict = {
   }
        if (list && list.length > 0) {
   
          const sessionName = []
          list.forEach(e => {
   
            if (e) {
   
              if(vm){
   
                vm.$set(vm.m_dicts, e.dictCode, e.dictDatas)
              }else {
   
                this.$set(this.m_dicts, e.dictCode, e.dictDatas)
              }
              sessionName.push(e.dictCode)
              pathAllDict[e.dictCode] = e.dictDatas
              sessionStorage.setItem(e.dictCode, JSON.stringify(e.dictDatas))
            }
          })
          store.commit('SET_DICT_DATA', pathAllDict