vue 使用字典值及其翻译

在日常开发中，我们会遇到很多枚举的值，这么枚举出来的值，我们可以统一处理，称为字典值的使用及翻译。

比如说：需要提交表单，表单中有性别和国家选项，这就需要下拉选择框来实现。数据少一点的还可以直接手写，但是像国家城市这种比较多的，手写就不太友好了。这个时候需要后端通过某个接口返回这个枚举值。我们使用这个返回的列表。

翻译就是枚举值对应的汉字与状态码，对照使用。

比如说：在表单里面选择了，性别男，这个时候表单中传递给后端的并不是男，这个汉字，而是对应的状态码（code）。后端保存也是状态码，同样的，在页面中需要显示了这个信息，显示的是男的对应状态码，而不是男这个汉字，这时候就需要翻译这个状态码。

使用字典值首先需要封装

在api中定义接口

import { post } from '@/request/http.js'
//字典值
const newDictApi = data => post('/api/dictApi',{}, data)
export { newDictApi }

在until中定义js函数 postDict.js

import { newDictApi } from '@/API/api_newDict'
// 查询字典
function getNewDict(e){
  var dictList = JSON.parse(sessionStorage.getItem(e)) 
  if(dictList){
    return dictList
  }else{
    return new Promise((resolve)=>{
      newDictApi({ type: e }).then(data=>{
        if (data.code === 200) {
          sessionStorage.setItem(e,JSON.stringify(data.data));
          resolve(data.data)
        }
      })
    })
  }
}
// 字典翻译
const translateDict = (list, e)=> {
  var value = ''
  list.map(i => {
    if (i.code == e) {
      value = i.value
    }
  })
  return value
}
export { getNewDict,translateDict }

 在main.js中将翻译定义成全局函数

import { translateDict } from './utils/postDict'
Vue.prototype.$translateDict = translateDict

new Vue({
    router,
    store,
})

在某个页面中使用

<template>
  <div>
    <el-select
    style=" 100%"
    v-model="personalForm.gender"
    clearable
    placeholder="请选择性别"
    >
      <el-option
      v-for="item in genderList"
      :key="item.value"
      :label="item.value"
      :value="item.code"
      ></el-option>
     </el-select>
           
     <el-select
     style=" 100%"
     v-model="personalForm.addressCountry"
     placeholder="请选择国家"
     clearable
     >
       <el-option
        v-for="item in countryList"
        :key="item.code"
        :label="item.value"
        :value="item.code"
        ></el-option>
     </el-select>      

     <div>
　　　　使用翻译时候需要把后端返回的状态码code拿到，然后和对应的枚举值做匹配，翻译函数会将对应的值输出出来
　　　　{{$translateDict(genderList,scope.row.gender)}}
　　　</div>

 </div>
</template>

<script>

import { getNewDict } from '@/utils/postDict'
export default {
  data() {
    return {
      countryList: [],
      genderList: [],
    }
  },
  created() {
    this.init()
  },
  mounted() {},
  methods: {
    async init() {
      this.genderList = await getNewDict('gender')
　　　　this.countryList = await getNewDict('country')
    },
  },
}
</script>